Spaces:

jatnikonm
/

simulations

Running

App Files Files Community

jnm-itb commited on Apr 24

Commit

e07e0a7

1 Parent(s): ceceae5

Implement structural updates and optimizations across multiple modules

Browse files

Files changed (4) hide show

blockchain.html +414 -0
dt_preservasi.html +1571 -0
index.html +68 -57
unet.html +12 -0

blockchain.html ADDED Viewed

	@@ -0,0 +1,414 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simulasi 3D Penyimpanan Arsip Blockchain</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* CSS Dasar */
+        body { margin: 0; overflow: hidden; font-family: 'Inter', sans-serif; background-color: #1f2937; }
+        #info { /* Info box di tengah atas */
+            position: absolute; top: 10px; width: 90%; max-width: 600px; left: 50%;
+            transform: translateX(-50%); text-align: center; z-index: 100; color: #e5e7eb;
+            padding: 12px; background-color: rgba(55, 65, 81, 0.85); border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2); font-size: 0.9rem;
+             min-height: 4em; display: flex; align-items: center; justify-content: center;
+             pointer-events: none; /* Agar tidak mengganggu hover di bawahnya */
+        }
+        #buttonContainer { /* Kontainer untuk tombol Start/Reset di bawah */
+            position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
+            z-index: 100; display: flex; gap: 1rem;
+        }
+        .simButton { /* Style umum untuk tombol simulasi */
+            padding: 10px 20px; border-radius: 8px; font-weight: 600; color: white;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease; cursor: pointer;
+            text-align: center; flex-grow: 1;
+        }
+        .simButton:disabled { background-color: #6b7280; cursor: not-allowed; opacity: 0.7; }
+        #startButton { background-color: #3b82f6; } #startButton:hover:not(:disabled) { background-color: #2563eb; }
+        #resetButton { background-color: #ef4444; } #resetButton:hover:not(:disabled) { background-color: #dc2626; }
+        #logHistoryPanel { /* Panel Log Histori di kiri */
+            position: absolute; top: 10px; left: 10px; width: 256px;
+            max-height: calc(100vh - 40px); /* Sesuaikan tinggi maks */
+            z-index: 50; display: flex; flex-direction: column;
+            background-color: rgba(31, 41, 55, 0.85); /* Samakan dengan info box */
+            padding: 0.75rem; border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+             pointer-events: auto; /* Pastikan bisa di-scroll */
+        }
+        #logHistoryContent { flex-grow: 1; overflow-y: auto; padding-right: 8px; margin-top: 8px; }
+        #logHistoryContent::-webkit-scrollbar { width: 6px; } #logHistoryContent::-webkit-scrollbar-track { background: rgba(75, 85, 99, 0.5); border-radius: 3px; } #logHistoryContent::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 3px; } #logHistoryContent::-webkit-scrollbar-thumb:hover { background: #6b7280; }
+        .logEntry { font-size: 0.8rem; padding-bottom: 4px; border-bottom: 1px solid rgba(107, 114, 128, 0.3); margin-bottom: 4px; color: #d1d5db;}
+        .logTimestamp { color: #9ca3af; margin-right: 5px; } .logMessage {}
+        /* Panel Info Blockchain di Kanan */
+        #blockchainInfoPanel {
+             position: absolute; top: 10px; right: 10px; width: 256px; /* Samakan lebar dgn log */
+             max-height: calc(100vh - 40px);
+             z-index: 50; display: flex; flex-direction: column;
+             background-color: rgba(31, 41, 55, 0.85);
+             padding: 0.75rem; border-radius: 8px;
+             box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+             color: #d1d5db; /* Warna teks default */
+             pointer-events: auto; /* Pastikan bisa di-scroll */
+        }
+         #blockchainInfoPanel h3 { /* Style judul panel */
+             font-weight: 600; /* Bold */ font-size: 1rem; /* Base */ margin-bottom: 0.5rem;
+             border-bottom: 1px solid #4b5563; /* Gray 600 */ padding-bottom: 0.25rem;
+             color: #e5e7eb; /* Gray 200 */ flex-shrink: 0;
+         }
+         #blockchainInfoContent { /* Konten yg bisa scroll */
+             flex-grow: 1; overflow-y: auto; space-y-2; /* Jarak antar paragraf */
+             padding-right: 8px; margin-top: 8px; font-size: 0.8rem; /* Ukuran font konten */
+         }
+         #blockchainInfoContent p strong { color: #9ca3af; } /* Warna label */
+         #blockchainInfoContent span { color: #e5e7eb; word-break: break-all; } /* Warna nilai & wrap */
+         /* Scrollbar untuk panel kanan */
+         #blockchainInfoContent::-webkit-scrollbar { width: 6px; }
+         #blockchainInfoContent::-webkit-scrollbar-track { background: rgba(75, 85, 99, 0.5); border-radius: 3px; }
+         #blockchainInfoContent::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 3px; }
+         #blockchainInfoContent::-webkit-scrollbar-thumb:hover { background: #6b7280; }
+        canvas { display: block; /* Hapus cursor: pointer; karena hover ditangani JS */ }
+    </style>
+</head>
+<body>
+    <div id="mainUI">
+        <div id="info">Arahkan kursor ke komponen (kotak berwarna) untuk info, atau mulai simulasi penyimpanan.</div>
+        <div id="buttonContainer">
+            <button id="startButton" class="simButton">Mulai Simulasi</button>
+            <button id="resetButton" class="simButton">Reset Simulasi</button>
+        </div>
+        <div id="logHistoryPanel">
+            <h3 class="font-bold text-base mb-1 border-b border-gray-600 pb-1 text-gray-100 flex-shrink-0">Log Histori</h3>
+            <div id="logHistoryContent"></div>
+        </div>
+         <div id="blockchainInfoPanel" class="hidden">
+             <h3>Detail Blok Terbaru</h3>
+             <div id="blockchainInfoContent">
+                 <p><strong>Blok #:</strong> <span id="bcPanel-blockNum">-</span></p>
+                 <p><strong>Timestamp:</strong> <span id="bcPanel-timestamp">-</span></p>
+                 <p><strong>Tx ID (Sim):</strong> <span id="bcPanel-txId">-</span></p>
+                 <p><strong>Metadata (Sim):</strong> <span id="bcPanel-metadata">-</span></p>
+                 <p><strong>File Hash (Sim):</strong> <span id="bcPanel-fileHash">-</span></p>
+                 <p><strong>IPFS CID (Sim):</strong> <span id="bcPanel-ipfsCid">-</span></p>
+             </div>
+         </div>
+    </div> <div id="container"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>
+    <script type="module">
+        // === Variabel Global ===
+        let scene, camera, renderer, controls;
+        let clientNode, appServerNode, ipfsNode;
+        let blockchainNodes = [];
+        const mainUI = document.getElementById('mainUI');
+        const infoElement = document.getElementById('info');
+        const startButton = document.getElementById('startButton');
+        const resetButton = document.getElementById('resetButton');
+        const container = document.getElementById('container');
+        const logHistoryContent = document.getElementById('logHistoryContent');
+        const blockchainInfoPanel = document.getElementById('blockchainInfoPanel');
+        const bcPanelBlockNum = document.getElementById('bcPanel-blockNum');
+        const bcPanelTimestamp = document.getElementById('bcPanel-timestamp');
+        const bcPanelTxId = document.getElementById('bcPanel-txId');
+        const bcPanelMetadata = document.getElementById('bcPanel-metadata');
+        const bcPanelFileHash = document.getElementById('bcPanel-fileHash');
+        const bcPanelIpfsCid = document.getElementById('bcPanel-ipfsCid');
+        // Variabel untuk Interaksi Hover
+        const raycaster = new THREE.Raycaster();
+        const mouse = new THREE.Vector2();
+        let clickableObjects = []; // Tetap gunakan nama ini, isinya node yg bisa di-hover
+        let currentlyHoveredObject = null; // Lacak objek yg sedang di-hover
+        const defaultInfoText = "Arahkan kursor ke komponen (kotak berwarna) untuk info, atau mulai simulasi penyimpanan.";
+        const blockGeometry = new THREE.BoxGeometry(0.6, 0.6, 0.6);
+        const maxVisibleBlocks = 4;
+        const blockSpacing = 0.7;
+        const nodePositions = { client: new THREE.Vector3(-15, 0, 0), appServer: new THREE.Vector3(0, 5, 0), ipfs: new THREE.Vector3(15, 0, 0), blockchainCenter: new THREE.Vector3(0, -10, 0), blockchainRadius: 10, numBlockchainNodes: 5 };
+        const dataColors = { file: 0x00ff00, cid: 0x00ffff, transaction: 0xff00ff, newBlock: 0x3b82f6, request: 0xffaa00, error: 0xff0000 };
+        let archiveCount = 0;
+        // === Inisialisasi ===
+        function init() {
+            scene = new THREE.Scene(); scene.background = new THREE.Color(0x1f2937);
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.z = 35; camera.position.y = 10;
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            container.appendChild(renderer.domElement);
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.9);
+            directionalLight.position.set(5, 15, 10); scene.add(directionalLight);
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true; controls.dampingFactor = 0.05;
+            controls.screenSpacePanning = false; controls.minDistance = 5; controls.maxDistance = 100;
+            controls.target.set(0, 0, 0);
+            createNodesAndSeparators();
+            resetLogHistory();
+            archiveCount = 0;
+            if (blockchainInfoPanel) blockchainInfoPanel.classList.add('hidden');
+            window.addEventListener('resize', onWindowResize, false);
+            startButton.addEventListener('click', startSimulation);
+            resetButton.addEventListener('click', resetSimulation);
+            // *** Ganti listener mousedown dengan mousemove ***
+            // renderer.domElement.removeEventListener('mousedown', onDocumentMouseDown, false); // Hapus jika ada
+            renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);
+            animate();
+        }
+        // === Pembuatan Objek 3D ===
+        function createNodesAndSeparators() {
+              const planeYOffset = -1.6; const titleYOffset = 1; const appZonePlaneGeo = new THREE.PlaneGeometry(25, 15); const appZoneMaterial = new THREE.MeshStandardMaterial({ color: 0x2a3a59, side: THREE.DoubleSide, roughness: 1.0 }); const appZonePlane = new THREE.Mesh(appZonePlaneGeo, appZoneMaterial); appZonePlane.rotation.x = -Math.PI / 2; const appZoneCenterX = (nodePositions.client.x + nodePositions.appServer.x) / 2; const appZoneCenterZ = (nodePositions.client.z + nodePositions.appServer.z) / 2; appZonePlane.position.set(appZoneCenterX, planeYOffset + 2, appZoneCenterZ); scene.add(appZonePlane); addZoneTitle("Zona Aplikasi", appZoneCenterX, appZonePlane.position.y + titleYOffset, appZoneCenterZ + 9); const bcZonePlaneGeo = new THREE.PlaneGeometry(nodePositions.blockchainRadius * 2.5, nodePositions.blockchainRadius * 2.5); const bcZoneMaterial = new THREE.MeshStandardMaterial({ color: 0x444444, side: THREE.DoubleSide, roughness: 1.0 }); const bcZonePlane = new THREE.Mesh(bcZonePlaneGeo, bcZoneMaterial); bcZonePlane.rotation.x = -Math.PI / 2; bcZonePlane.position.copy(nodePositions.blockchainCenter).y = nodePositions.blockchainCenter.y + planeYOffset; scene.add(bcZonePlane); addZoneTitle("Jaringan Blockchain", nodePositions.blockchainCenter.x, bcZonePlane.position.y + titleYOffset, nodePositions.blockchainCenter.z + nodePositions.blockchainRadius + 4); const ipfsZonePlaneGeo = new THREE.PlaneGeometry(10, 10); const ipfsZoneMaterial = new THREE.MeshStandardMaterial({ color: 0x4a235a, side: THREE.DoubleSide, roughness: 1.0 }); const ipfsZonePlane = new THREE.Mesh(ipfsZonePlaneGeo, ipfsZoneMaterial); ipfsZonePlane.rotation.x = -Math.PI / 2; ipfsZonePlane.position.copy(nodePositions.ipfs).y = nodePositions.ipfs.y + planeYOffset; scene.add(ipfsZonePlane); addZoneTitle("Penyimpanan Off-Chain", nodePositions.ipfs.x, ipfsZonePlane.position.y + titleYOffset, nodePositions.ipfs.z + 6);
+              clickableObjects = [];
+              // *** Tambahkan emissive: 0x000000 pada material node ***
+              const nodeGeometry = new THREE.BoxGeometry(3, 3, 3);
+              const clientMaterial = new THREE.MeshStandardMaterial({ color: 0x4287f5, emissive: 0x000000 });
+              const appServerMaterial = new THREE.MeshStandardMaterial({ color: 0xf5a642, emissive: 0x000000 });
+              const ipfsMaterial = new THREE.MeshStandardMaterial({ color: 0x9e42f5, emissive: 0x000000 });
+              const blockchainMaterialBase = new THREE.MeshStandardMaterial({ color: 0xcccccc, transparent: true, opacity: 0.9, emissive: 0x000000 });
+              clientNode = new THREE.Mesh(nodeGeometry, clientMaterial); clientNode.position.copy(nodePositions.client); clientNode.userData = { description: "Perangkat Pengguna (Client): Titik interaksi awal pengguna, tempat arsip diunggah atau diakses.", objectType: "node" }; scene.add(clientNode); addLabel(clientNode, "Pengguna"); clickableObjects.push(clientNode);
+              appServerNode = new THREE.Mesh(nodeGeometry, appServerMaterial); appServerNode.position.copy(nodePositions.appServer); appServerNode.userData = { description: "Server Aplikasi: Memproses permintaan, mengelola metadata & hash, berinteraksi dengan IPFS dan Blockchain.", objectType: "node" }; scene.add(appServerNode); addLabel(appServerNode, "Server App"); clickableObjects.push(appServerNode);
+              ipfsNode = new THREE.Mesh(nodeGeometry, ipfsMaterial); ipfsNode.position.copy(nodePositions.ipfs); ipfsNode.userData = { description: "IPFS (InterPlanetary File System): Sistem penyimpanan terdistribusi untuk menyimpan file arsip besar secara off-chain.", objectType: "node" }; scene.add(ipfsNode); addLabel(ipfsNode, "IPFS"); clickableObjects.push(ipfsNode);
+              const angleStep = (Math.PI * 2) / nodePositions.numBlockchainNodes;
+              for (let i = 0; i < nodePositions.numBlockchainNodes; i++) {
+                  const angle = i * angleStep; const x = nodePositions.blockchainCenter.x + nodePositions.blockchainRadius * Math.cos(angle); const z = nodePositions.blockchainCenter.z + nodePositions.blockchainRadius * Math.sin(angle);
+                  // *** Clone material base agar setiap node punya material instance sendiri ***
+                  const nodeMaterialInstance = blockchainMaterialBase.clone();
+                  const node = new THREE.Mesh(nodeGeometry.clone(), nodeMaterialInstance);
+                  node.position.set(x, nodePositions.blockchainCenter.y, z); node.userData = { chainBlocks: [], description: `Node Blockchain ${i + 1}: Menyimpan salinan ledger, memvalidasi transaksi, dan mencapai konsensus.`, objectType: "node" }; scene.add(node); blockchainNodes.push(node); addLabel(node, `Node BC ${i + 1}`); clickableObjects.push(node);
+               }
+         }
+        // --- Fungsi Label ---
+        function createTextSprite(message, parameters) { /* ... kode sama ... */
+              const fontface = parameters.fontface || 'Arial'; const fontsize = parameters.fontsize || 18; const borderThickness = parameters.borderThickness || 4; const borderColor = parameters.borderColor || { r:0, g:0, b:0, a:1.0 }; const backgroundColor = parameters.backgroundColor || { r:255, g:255, b:255, a:1.0 }; const textColor = parameters.textColor || { r:0, g:0, b:0, a:1.0 }; const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); context.font = `Bold ${fontsize}px ${fontface}`; const metrics = context.measureText(message); const textWidth = metrics.width; context.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`; context.strokeStyle = `rgba(${borderColor.r}, ${borderColor.g}, ${borderColor.b}, ${borderColor.a})`; context.lineWidth = borderThickness; roundRect(context, borderThickness/2, borderThickness/2, textWidth + borderThickness, fontsize * 1.4 + borderThickness, 6); context.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, 1.0)`; context.fillText( message, borderThickness, fontsize + borderThickness); const texture = new THREE.Texture(canvas); texture.needsUpdate = true; const spriteMaterial = new THREE.SpriteMaterial({ map: texture }); const sprite = new THREE.Sprite(spriteMaterial); sprite.scale.set(0.5 * fontsize, 0.25 * fontsize, 0.75 * fontsize); return sprite;
+         }
+        function roundRect(ctx, x, y, w, h, r) { /* ... kode sama ... */
+               ctx.beginPath(); ctx.moveTo(x+r, y); ctx.lineTo(x+w-r, y); ctx.quadraticCurveTo(x+w, y, x+w, y+r); ctx.lineTo(x+w, y+h-r); ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h); ctx.lineTo(x+r, y+h); ctx.quadraticCurveTo(x, y+h, x, y+h-r); ctx.lineTo(x, y+r); ctx.quadraticCurveTo(x, y, x+r, y); ctx.closePath(); ctx.fill(); ctx.stroke();
+         }
+         function addLabel(node, text) { /* ... kode sama ... */
+              const sprite = createTextSprite(text, { fontsize: 20, fontface: 'Arial', textColor: { r:255, g:255, b:255, a:1.0 }, backgroundColor: { r:0, g:0, b:0, a:0.6 }, borderColor: { r:255, g:255, b:255, a:0.8 } }); sprite.position.set(node.position.x, node.position.y + 2.0, node.position.z); scene.add(sprite);
+         }
+         function addZoneTitle(text, x, y, z) { /* ... kode sama ... */
+              const titleSprite = createTextSprite(text, { fontsize: 28, fontface: 'Arial', textColor: { r:210, g:210, b:210, a:1.0 }, backgroundColor: { r:0, g:0, b:0, a:0.0 }, borderColor: { r:0, g:0, b:0, a:0.0 } }); titleSprite.position.set(x, y + 0.5, z); scene.add(titleSprite);
+         }
+        // --- Akhir Fungsi Label ---
+        // === Logika Animasi (tidak berubah) ===
+        function animateFlowLine(startNode, endNode, duration, color) { /* ... kode sama, return Promise ... */
+               return new Promise(resolve => { const positions = new Float32Array(2 * 3); positions[0] = startNode.position.x; positions[1] = startNode.position.y; positions[2] = startNode.position.z; positions[3] = startNode.position.x; positions[4] = startNode.position.y; positions[5] = startNode.position.z; const geometry = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const material = new THREE.LineBasicMaterial({ color: color, linewidth: 3, transparent: true, opacity: 1.0 }); const line = new THREE.Line(geometry, material); scene.add(line); const targetPosition = { x: startNode.position.x, y: startNode.position.y, z: startNode.position.z }; new TWEEN.Tween(targetPosition) .to({ x: endNode.position.x, y: endNode.position.y, z: endNode.position.z }, duration) .easing(TWEEN.Easing.Linear.None) .onUpdate(() => { const currentPositions = line.geometry.attributes.position.array; currentPositions[3] = targetPosition.x; currentPositions[4] = targetPosition.y; currentPositions[5] = targetPosition.z; line.geometry.attributes.position.needsUpdate = true; }) .onComplete(() => { new TWEEN.Tween(line.material) .to({ opacity: 0 }, 200) .easing(TWEEN.Easing.Linear.None) .onComplete(() => { scene.remove(line); resolve(); }) .start(); }) .start(); });
+         }
+        function flashNode(node, duration = 500, color = 0xffffff) { /* ... kode sama ... */
+               if (!node.material || !node.material.color) return; const originalColor = node.material.color.getHex(); new TWEEN.Tween(node.material.color) .to({ r: new THREE.Color(color).r, g: new THREE.Color(color).g, b: new THREE.Color(color).b }, duration / 2) .easing(TWEEN.Easing.Quadratic.Out) .yoyo(true).repeat(1) .onComplete(() => { node.material.color.setHex(originalColor); }) .start();
+         }
+        function addBlockToNodeChain(node, blockColor) { /* ... kode sama, return Promise ... */
+               return new Promise(resolve => { if (!node || !node.geometry || !node.userData || !Array.isArray(node.userData.chainBlocks)) { console.error("Invalid node or node data for addBlockToNodeChain:", node); resolve(); return; } if (!node.geometry.boundingBox) { node.geometry.computeBoundingBox(); } if (!blockGeometry.boundingBox) { blockGeometry.computeBoundingBox(); } if (!node.geometry.boundingBox || !blockGeometry.boundingBox) { console.error("Failed to compute bounding box for node or block geometry."); resolve(); return; } const nodeSize = new THREE.Vector3(); node.geometry.boundingBox.getSize(nodeSize); const nodeHeight = nodeSize.y; const blockSize = new THREE.Vector3(); blockGeometry.boundingBox.getSize(blockSize); const blockHeight = blockSize.y; const newBlockMaterial = new THREE.MeshStandardMaterial({ color: blockColor }); const newBlock = new THREE.Mesh(blockGeometry.clone(), newBlockMaterial); const chain = node.userData.chainBlocks; const baseY = node.position.y - (nodeHeight / 2) + (blockHeight / 2); const targetY = baseY + chain.length * blockSpacing; newBlock.position.set(node.position.x, targetY + 3, node.position.z); scene.add(newBlock); chain.push(newBlock); new TWEEN.Tween(newBlock.position) .to({ y: targetY }, 800) .easing(TWEEN.Easing.Bounce.Out) .onComplete(() => { let repositionPromises = []; if (chain.length > maxVisibleBlocks) { const oldestBlock = chain.shift(); if (oldestBlock) { scene.remove(oldestBlock); } chain.forEach((currentBlock, i) => { const currentBaseY = node.position.y - (nodeHeight / 2) + (blockHeight / 2); const newTargetY = currentBaseY + i * blockSpacing; const p = new Promise(res => { new TWEEN.Tween(currentBlock.position) .to({ y: newTargetY }, 300) .easing(TWEEN.Easing.Quadratic.Out) .onComplete(res) .start(); }); repositionPromises.push(p); }); } Promise.all(repositionPromises).then(resolve); }) .start(); });
+         }
+        // --- Akhir Logika Animasi ---
+        // === Logika Log Histori (tidak berubah) ===
+        function addLogEntry(message) { /* ... kode sama ... */
+              if (!logHistoryContent) return; const timestamp = new Date().toLocaleTimeString('id-ID', { hour12: false }); const logElement = document.createElement('p'); logElement.classList.add('logEntry'); logElement.innerHTML = `<span class="logTimestamp">[${timestamp}]</span> <span class="logMessage">${message}</span>`; logHistoryContent.prepend(logElement); const maxLogEntries = 50; while (logHistoryContent.children.length > maxLogEntries) { logHistoryContent.removeChild(logHistoryContent.lastChild); }
+         }
+        function resetLogHistory() { /* ... kode sama ... */
+              if (logHistoryContent) { logHistoryContent.innerHTML = ''; addLogEntry("Log histori dimulai."); }
+         }
+        // --- Akhir Logika Log Histori ---
+        // === Fungsi Generate Mock Data Blockchain ===
+        function generateMockData() { /* ... kode sama ... */
+             const txId = '0x' + [...Array(16)].map(() => Math.floor(Math.random() * 16).toString(16)).join(''); const fileHash = 'sha256-' + [...Array(32)].map(() => Math.floor(Math.random() * 16).toString(16)).join(''); const ipfsCid = 'Qm' + [...Array(44)].map(() => (Math.random() < 0.5 ? String.fromCharCode(Math.floor(Math.random() * 26) + 97) : Math.floor(Math.random() * 10))).join(''); return { txId, fileHash, ipfsCid };
+         }
+        // === Fungsi Update Panel Info Blockchain ===
+        function updateBlockchainInfoPanel(blockNumber, mockData) { /* ... kode sama ... */
+             if (!bcPanelBlockNum || !bcPanelTimestamp || !bcPanelTxId || !bcPanelMetadata || !bcPanelFileHash || !bcPanelIpfsCid) { console.error("One or more blockchain info panel elements not found!"); return; } console.log(`Updating blockchain info panel for Block #${blockNumber} with data:`, mockData); bcPanelBlockNum.innerText = blockNumber; bcPanelTimestamp.innerText = new Date().toLocaleString('id-ID', { dateStyle: 'medium', timeStyle: 'medium'}); bcPanelTxId.innerText = mockData.txId; bcPanelMetadata.innerText = `Data simulasi untuk arsip di blok #${blockNumber}.`; bcPanelFileHash.innerText = mockData.fileHash; bcPanelIpfsCid.innerText = mockData.ipfsCid;
+         }
+        // === Fungsi Increment Archive Count ===
+        function incrementArchiveCount() { /* ... kode sama ... */
+             archiveCount++; console.log("Archive count incremented to:", archiveCount);
+         }
+        // === Fungsi Reset State Visual ===
+        function resetVisualState() {
+               blockchainNodes.forEach(node => {
+                   if(node.material.color) node.material.color.setHex(0xcccccc);
+                   // *** Reset warna emissive juga ***
+                   if(node.material.emissive) node.material.emissive.setHex(0x000000);
+                   if(node.userData && node.userData.chainBlocks){ node.userData.chainBlocks.forEach(block => scene.remove(block)); node.userData.chainBlocks = []; }
+                });
+                // Reset node lain juga
+                if(clientNode && clientNode.material.emissive) clientNode.material.emissive.setHex(0x000000);
+                if(appServerNode && appServerNode.material.emissive) appServerNode.material.emissive.setHex(0x000000);
+                if(ipfsNode && ipfsNode.material.emissive) ipfsNode.material.emissive.setHex(0x000000);
+               const linesToRemove = []; scene.traverse((object) => { if (object.isLine) { linesToRemove.push(object); } }); linesToRemove.forEach(line => scene.remove(line));
+               infoElement.innerText = defaultInfoText; // Gunakan teks default
+               resetLogHistory();
+               if (blockchainInfoPanel) blockchainInfoPanel.classList.add('hidden');
+               currentlyHoveredObject = null; // Reset objek yang di-hover
+         }
+        // === Fungsi Reset Simulasi ===
+        function resetSimulation() { /* ... kode sama ... */
+                console.log("Resetting simulation..."); TWEEN.removeAll();
+                resetVisualState();
+                archiveCount = 0;
+                console.log("Archive count reset to:", archiveCount);
+                startButton.disabled = false; resetButton.disabled = false;
+                addLogEntry("Simulasi direset.");
+         }
+        // === Alur Simulasi Penyimpanan ===
+        async function startSimulation() {
+            startButton.disabled = true; resetButton.disabled = true;
+            if (blockchainInfoPanel) blockchainInfoPanel.classList.add('hidden');
+            resetVisualState();
+            updateInfo("Memulai simulasi penyimpanan...");
+            addLogEntry("Memulai simulasi penyimpanan...");
+            try { // Alur utama tidak berubah
+                await delay(500);
+                updateInfo("1. Pengguna memulai proses upload arsip..."); addLogEntry("Pengguna memulai upload arsip.");
+                await delay(1500);
+                updateInfo("2. Mengirim file arsip ke Server Aplikasi..."); addLogEntry("Mengirim file ke Server Aplikasi.");
+                await animateFlowLine(clientNode, appServerNode, 2000, dataColors.file);
+                flashNode(appServerNode);
+                updateInfo("3. Server memproses: Ekstrak metadata, hitung hash..."); addLogEntry("Server memproses file (metadata, hash).");
+                await delay(1500);
+                updateInfo("4. Server mengirim file ke IPFS..."); addLogEntry("Server mengirim file ke IPFS.");
+                await animateFlowLine(appServerNode, ipfsNode, 2000, dataColors.file);
+                flashNode(ipfsNode);
+                updateInfo("5. IPFS menyimpan file..."); addLogEntry("IPFS menyimpan file.");
+                await delay(1000);
+                updateInfo("6. Server menerima CID dari IPFS..."); addLogEntry("Server menerima CID dari IPFS.");
+                await animateFlowLine(ipfsNode, appServerNode, 1000, dataColors.cid);
+                flashNode(appServerNode);
+                updateInfo("7. Server membuat transaksi..."); addLogEntry("Server membuat transaksi blockchain.");
+                await delay(1500);
+                const targetBCNode = blockchainNodes[0];
+                updateInfo("8. Mengirim transaksi ke Node BC 1..."); addLogEntry("Mengirim transaksi ke Node BC 1.");
+                await animateFlowLine(appServerNode, targetBCNode, 2000, dataColors.transaction);
+                flashNode(targetBCNode, 500, dataColors.transaction);
+                updateInfo("9. Node 1 menyebarkan transaksi..."); addLogEntry("Node BC 1 melakukan broadcast transaksi.");
+                await delay(1000);
+                const broadcastPromises = blockchainNodes.slice(1).map(node =>
+                    animateFlowLine(targetBCNode, node, 1500, dataColors.transaction).then(() => {
+                        flashNode(node, 500, dataColors.transaction);
+                    })
+                );
+                await Promise.all(broadcastPromises);
+                addLogEntry("Broadcast transaksi selesai."); await delay(500);
+                updateInfo("10. Node melakukan proses konsensus..."); addLogEntry("Node BC memulai proses konsensus.");
+                const consensusPromises = blockchainNodes.map(node => {
+                    return new Promise(resolve => { flashNode(node, 1000, 0x00ff00); setTimeout(resolve, 1100); });
+                });
+                await Promise.all(consensusPromises);
+                addLogEntry("Konsensus tercapai.");
+                updateInfo("11. Transaksi dicatat, blok baru ditambahkan..."); addLogEntry("Mencatat transaksi & menambahkan blok baru.");
+                const blockAddingPromises = blockchainNodes.map(node => addBlockToNodeChain(node, dataColors.newBlock));
+                console.log("Waiting for all blocks to be added...");
+                await Promise.all(blockAddingPromises);
+                console.log("All blocks added visually. Proceeding to show panel.");
+                addLogEntry("Blok baru ditambahkan ke semua node."); await delay(1000);
+                // --- Sukses ---
+                updateInfo("12. Sukses! Arsip tersimpan aman, data tercatat di blockchain.");
+                addLogEntry("Penyimpanan arsip berhasil.");
+                incrementArchiveCount();
+                console.log("Generating mock data and updating panel...");
+                const mockData = generateMockData();
+                updateBlockchainInfoPanel(archiveCount, mockData);
+                console.log("Attempting to show blockchain info panel. Classes before:", blockchainInfoPanel ? blockchainInfoPanel.className : 'null');
+                if (blockchainInfoPanel) blockchainInfoPanel.classList.remove('hidden');
+                console.log("Attempting to show blockchain info panel. Classes after:", blockchainInfoPanel ? blockchainInfoPanel.className : 'null');
+                console.log("Panel offsetHeight:", blockchainInfoPanel ? blockchainInfoPanel.offsetHeight : 'null');
+                startButton.disabled = false;
+                resetButton.disabled = false;
+            } catch (error) {
+                console.error("Error during startSimulation:", error);
+                updateInfo("Terjadi error selama simulasi penyimpanan.");
+                addLogEntry(`Error: ${error.message}`);
+                resetButton.disabled = false;
+            }
+        }
+         // === Alur Simulasi Penelusuran (Dihapus) ===
+         // === Fungsi Simulasi Perubahan Format (Dihapus) ===
+        // === Fungsi Utilitas ===
+        function updateInfo(message) { console.log(message); infoElement.innerText = message; }
+        function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
+        // === Fungsi Baru: Penanganan Hover Mouse ===
+        function onDocumentMouseMove(event) {
+            event.preventDefault();
+            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(clickableObjects);
+            if (intersects.length > 0) {
+                const intersectedObject = intersects[0].object;
+                // Cek jika objek berbeda dari yg dihover sebelumnya
+                if (currentlyHoveredObject !== intersectedObject) {
+                    // Reset objek yg dihover sebelumnya (jika ada)
+                    if (currentlyHoveredObject && currentlyHoveredObject.material.emissive) {
+                        currentlyHoveredObject.material.emissive.setHex(0x000000);
+                    }
+                    // Set objek baru yg dihover
+                    currentlyHoveredObject = intersectedObject;
+                    if (currentlyHoveredObject.material.emissive) {
+                         currentlyHoveredObject.material.emissive.setHex(0x555555); // Warna hover
+                    }
+                    // Tampilkan deskripsi
+                    if (currentlyHoveredObject.userData && currentlyHoveredObject.userData.description) {
+                         infoElement.innerText = currentlyHoveredObject.userData.description;
+                    }
+                }
+                 // Jika sama, tidak perlu lakukan apa2
+            } else {
+                // Jika tidak ada objek yg dihover
+                if (currentlyHoveredObject) {
+                    // Reset objek yg sebelumnya dihover
+                     if (currentlyHoveredObject.material.emissive) {
+                        currentlyHoveredObject.material.emissive.setHex(0x000000);
+                    }
+                    currentlyHoveredObject = null;
+                    // Kembalikan info box ke default
+                    infoElement.innerText = defaultInfoText;
+                }
+            }
+        }
+        // === Fungsi Penanganan Klik Mouse (Dihapus) ===
+        // function onDocumentMouseDown(event) { ... }
+        // === Loop Animasi & Penanganan Ukuran Jendela ===
+        function animate() { requestAnimationFrame(animate); TWEEN.update(); controls.update(); renderer.render(scene, camera); }
+        function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }
+        // === Mulai Aplikasi ===
+        init();
+    </script>
+</body>
+</html>

dt_preservasi.html ADDED Viewed

	@@ -0,0 +1,1571 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Digital Twin Preservasi Arsip Statis</title> <style>
+        body { margin: 0; font-family: 'Inter', sans-serif; background-color: #f0f0f0; color: #333; overflow: hidden; }
+        canvas { display: block; width: 100%; height: 100%; }
+        /* Style for CSS2DRenderer overlay */
+        #label-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none; /* Allow clicks to pass through to the canvas */
+            overflow: hidden;
+        }
+        .shelf-label {
+            background-color: rgba(0, 0, 0, 0.6);
+            color: white;
+            padding: 3px 8px;
+            border-radius: 4px;
+            font-size: 10px; /* Smaller font size for labels */
+            white-space: nowrap;
+            /* pointer-events: none; Already handled by container */
+        }
+        /* *** Style for Temperature Tooltip *** */
+        .temp-tooltip {
+            position: absolute; /* Needed for CSS2DRenderer positioning */
+            background-color: rgba(255, 255, 153, 0.8); /* Light yellow */
+            color: black;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 11px;
+            white-space: nowrap;
+            border: 1px solid #ccc;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+            display: none; /* Hidden by default */
+            pointer-events: none; /* Ignore mouse events */
+        }
+        #info {
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: auto;
+            max-width: 80%;
+            text-align: center;
+            z-index: 100;
+            display: block;
+            background-color: rgba(255, 255, 255, 0.85);
+            padding: 10px 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            font-size: 1.1em;
+        }
+        #controls-container {
+            position: absolute;
+            bottom: 15px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 12px 20px;
+            border-radius: 10px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+            align-items: center;
+            justify-content: center;
+            max-width: 95%;
+            z-index: 100;
+        }
+        #controls-container label,
+        #controls-container input,
+        #controls-container button {
+            color: white;
+            font-size: 0.95em;
+        }
+         #controls-container button,
+         #controls-container input[type="file"]::file-selector-button /* Keep style for potential re-add */
+          {
+            padding: 8px 14px;
+            border-radius: 6px;
+            border: none;
+            background-color: #555;
+            cursor: pointer;
+            transition: background-color 0.3s, box-shadow 0.3s;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+         }
+         #controls-container button:hover,
+         #controls-container input[type="file"]::file-selector-button:hover {
+             background-color: #777;
+             box-shadow: 0 2px 5px rgba(0,0,0,0.4);
+         }
+         #controls-container button:active,
+         #controls-container input[type="file"]::file-selector-button:active {
+             background-color: #444;
+             box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
+         }
+         #controls-container input[type="file"] {
+            background: none;
+            border: none;
+            padding: 0;
+            box-shadow: none;
+            max-width: 150px;
+         }
+        /* #instructions style removed */
+        #archive-list-container {
+            position: absolute;
+            top: 60px; /* Adjusted position now that instructions are gone */
+            left: 10px;
+            width: 210px;
+            max-height: calc(100vh - 80px - 80px); /* Adjusted height */
+            background-color: rgba(0, 0, 0, 0.75);
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            font-size: 0.9em;
+            overflow-y: auto;
+            z-index: 99;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+        }
+        #archive-list-container h3 {
+            margin-top: 0;
+            margin-bottom: 10px;
+            font-size: 1em;
+            border-bottom: 1px solid #666;
+            padding-bottom: 5px;
+        }
+        #archive-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        #archive-list li {
+            padding: 6px 8px;
+            cursor: pointer;
+            border-bottom: 1px solid #444;
+            transition: background-color 0.2s;
+            font-size: 0.9em;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        #archive-list li:last-child { border-bottom: none; }
+        #archive-list li:hover { background-color: rgba(255, 255, 255, 0.2); }
+        #archive-list li.selected { background-color: rgba(100, 149, 237, 0.5); font-weight: bold; }
+        #message-area {
+            position: absolute;
+            bottom: 80px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: rgba(34, 139, 34, 0.8);
+            color: white;
+            padding: 8px 15px;
+            border-radius: 5px;
+            z-index: 101;
+            display: none;
+            font-size: 0.9em;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+            text-align: center;
+        }
+        /* Style for Environment Info Panel */
+        #environment-info {
+            position: absolute;
+            top: 60px; /* Position below main title */
+            right: 10px;
+            background-color: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 10px 15px;
+            border-radius: 8px;
+            font-size: 0.9em;
+            z-index: 99;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+            min-width: 200px; /* Slightly wider */
+        }
+        #environment-info h4 {
+            margin-top: 0;
+            margin-bottom: 8px;
+            font-size: 1em;
+            border-bottom: 1px solid #666;
+            padding-bottom: 4px;
+        }
+        #environment-info p {
+            margin: 5px 0; /* Adjusted margin */
+            font-size: 0.95em;
+            display: flex; /* Use flex for alignment */
+            justify-content: space-between; /* Space out label and value */
+        }
+        #environment-info span {
+            font-weight: bold;
+            text-align: right; /* Align value to the right */
+            margin-left: 10px; /* Add space between label and value */
+        }
+         /* Style for Analytics Panel */
+        #analytics-panel {
+            position: absolute;
+            top: 300px; /* *** ADJUSTED TOP POSITION *** Position further down */
+            right: 10px;
+            background-color: rgba(0, 0, 0, 0.75); /* Slightly darker */
+            color: white;
+            padding: 10px 15px;
+            border-radius: 8px;
+            font-size: 0.9em;
+            z-index: 98; /* Below env info if overlapping */
+            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+            min-width: 200px;
+            max-height: calc(100vh - 320px - 80px); /* *** ADJUSTED MAX HEIGHT *** Limit height based on new top */
+            overflow-y: auto; /* Add scroll if content overflows */
+        }
+        #analytics-panel h4 {
+            margin-top: 0;
+            margin-bottom: 8px;
+            font-size: 1em;
+            border-bottom: 1px solid #666;
+            padding-bottom: 4px;
+        }
+        #analytics-panel h5 {
+             margin-top: 10px;
+             margin-bottom: 5px;
+             font-size: 0.95em;
+             font-weight: bold;
+        }
+        #analytics-panel ul {
+            list-style: none;
+            padding: 0;
+            margin: 0 0 10px 0;
+            font-size: 0.9em;
+        }
+        #analytics-panel li {
+            padding: 3px 0;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        #analytics-panel li span { /* Style for count */
+            font-weight: bold;
+            margin-left: 8px;
+            float: right; /* Align count to the right */
+        }
+        #analytics-panel button { /* Style for update button */
+            display: block;
+            width: 100%;
+            margin-top: 10px;
+            padding: 5px 10px;
+            border-radius: 4px;
+            border: none;
+            background-color: #555;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        #analytics-panel button:hover {
+            background-color: #777;
+        }
+    </style>
+</head>
+<body>
+    <div id="info">Digital Twin Preservasi Arsip Statis</div> <div id="message-area">Pesan sukses/error</div>
+    <div id="archive-list-container">
+        <h3>Daftar Arsip (30)</h3>
+        <ul id="archive-list">
+            <li>Memuat data...</li>
+        </ul>
+    </div>
+     <div id="environment-info">
+        <h4>Info Lingkungan & Status</h4>
+        <p>Suhu Rata²: <span id="temp-value">--</span> °C</p>
+        <p>Kelembapan: <span id="humidity-value">--</span> %</p>
+        <p>Cahaya: <span id="light-value">--</span> Lux</p>
+        <hr style="border-color: #555; margin: 8px 0;">
+        <p>Total Boks: <span id="total-boxes-value">--</span></p>
+        <p>Utilitas: <span id="utility-value">--</span> %</p>
+        <p>Arsip Keluar: <span id="borrowed-value">--</span></p>
+        <p>Rata² Temu: <span id="avg-retrieval-time">--</span> detik</p>
+    </div>
+    <div id="analytics-panel">
+        <h4>Analisis Akses</h4>
+        <button id="update-analytics-btn">Tampilkan/Perbarui Analisis</button>
+        <h5>Arsip Paling Sering Diakses:</h5>
+        <ul id="top-accessed-list">
+            <li>Belum ada data.</li>
+        </ul>
+        <h5>Lorong Paling Sering Dilalui:</h5>
+        <ul id="top-aisles-list">
+             <li>Belum ada data.</li>
+        </ul>
+    </div>
+    <div id="controls-container">
+        <button id="toggle-view-button">Ganti ke Mode Jalan</button>
+    </div>
+    <div id="label-container"></div>
+    <div id="temp-tooltip" class="temp-tooltip"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/PointerLockControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/renderers/CSS2DRenderer.js"></script>
+    <script>
+        // === Basic Scene Setup ===
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x87ceeb);
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMap.enabled = true;
+        document.body.appendChild(renderer.domElement);
+        // === CSS2D Renderer for Labels ===
+        const labelRenderer = new THREE.CSS2DRenderer();
+        labelRenderer.setSize(window.innerWidth, window.innerHeight);
+        labelRenderer.domElement.style.position = 'absolute';
+        labelRenderer.domElement.style.top = '0px';
+        labelRenderer.domElement.id = 'label-container';
+        document.body.appendChild(labelRenderer.domElement);
+        // === Message Area ===
+        const messageArea = document.getElementById('message-area');
+        function showMessage(text, isError = false, duration = 5000) { /* ... (showMessage function remains the same) ... */
+             messageArea.textContent = text;
+             messageArea.style.backgroundColor = isError ? 'rgba(220, 20, 60, 0.8)' : 'rgba(34, 139, 34, 0.8)';
+             messageArea.style.display = 'block';
+             setTimeout(() => {
+                 messageArea.style.display = 'none';
+             }, duration);
+        }
+        // === Lighting ===
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        scene.add(ambientLight);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(10, 20, 5);
+        directionalLight.castShadow = true;
+        scene.add(directionalLight);
+        directionalLight.shadow.mapSize.width = 1024;
+        directionalLight.shadow.mapSize.height = 1024;
+        directionalLight.shadow.camera.near = 0.5;
+        directionalLight.shadow.camera.far = 50;
+        // === Room ===
+        const roomWidth = 20;
+        const roomHeight = 5;
+        const roomDepth = 30;
+        const floorGeometry = new THREE.PlaneGeometry(roomWidth, roomDepth);
+        const floorMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc, side: THREE.DoubleSide });
+        const floor = new THREE.Mesh(floorGeometry, floorMaterial);
+        floor.rotation.x = -Math.PI / 2;
+        floor.position.y = -roomHeight / 2;
+        floor.receiveShadow = true;
+        scene.add(floor);
+        // === Constants ===
+        const playerEyeHeight = 1.7;
+        const MAX_ARCHIVES_TO_LOAD = 30; // Limit number of archives
+        const TEMP_IDEAL_MIN = 18;
+        const TEMP_IDEAL_MAX = 24;
+        const TEMP_COLD = 15;
+        const TEMP_HOT = 27;
+        const ANOMALY_SHELF_INDICES = [5, 15]; // *** Indices of shelves with anomalies ***
+        const GRID_RESOLUTION = 0.5; // Size of each grid cell for pathfinding
+        // === Global Data Storage ===
+        let archiveData = []; // Use let to allow reassignment
+        const boxes = [];
+        const shelves = [];
+        const shelfLabels = [];
+        const rails = [];
+        let totalBoxesCreated = 0; // Track total boxes physically created
+        let occupiedBoxesCount = 0; // Track boxes with actual data
+        const retrievalTimes = []; // Array to store recent retrieval times
+        const maxRetrievalTimes = 5; // Number of times to average over
+        const walkingSpeed = 1.5; // Units per second (adjust as needed)
+        const fixedPickTime = 5; // Fixed seconds for picking the box (adjust as needed)
+        const accessFrequency = {}; // { locationId: count }
+        const aisleAccessFrequency = {}; // { aisleZ: count }
+        const shelfPanels = []; // *** Array to store all shelf panels for raycasting ***
+        let navigationGrid = []; // *** Grid for A* pathfinding ***
+        let gridWidth = 0;
+        let gridHeight = 0;
+        let gridOriginOffset = { x: 0, z: 0 };
+        // === Raycasting & Hover ===
+        const raycaster = new THREE.Raycaster();
+        const mouse = new THREE.Vector2();
+        let hoveredShelf = null;
+        const tempTooltipElement = document.getElementById('temp-tooltip'); // Get tooltip div
+        // === Default Dummy Data (Updated & Mapped) ===
+        // Function to generate box IDs sequentially
+        function generateBoxIds(rows, shelvesPerRow, levels, boxesPerLevel) {
+            const ids = [];
+            for (let r = 1; r <= rows; r++) {
+                for (let s = 1; s <= shelvesPerRow; s++) {
+                    for (let i = 1; i <= levels; i++) {
+                        for (let b = 1; b <= boxesPerLevel; b++) {
+                            ids.push(`B${r}-R${s}-S${i}-N${b}`);
+                        }
+                    }
+                }
+            }
+            return ids;
+        }
+        // Raw data extracted from PDF (first 30 entries)
+        const rawPdfData = [
+            { no: 1, sub: "Agenda", uraian: "Mijnwezen Agenda A Directie 1902. Nummer 56-28271.", kurun: "1 Januari 1902-14 Oktober 1902", kondisi: "Licht beschadigd" },
+            { no: 2, sub: "Agenda", uraian: "Agenda AFD M 1905-1906, No. 1-939 (1905), 1-883 (1906).", kurun: "2 Januari 1905-3 Januari 1907", kondisi: "Goed" },
+            { no: 3, sub: "Agenda", uraian: "Agenda V 1930. Doorlopend nummer 8191-10530. (2590).", kurun: "6 Mei 1930-13 Juni 1930", kondisi: "Goed" },
+            { no: 4, sub: "Agenda", uraian: "Agenda 1934. Doorloppend nummer 1-185.", kurun: "15 Januari 1934-29 Desember 1934", kondisi: "Licht beschadigd" },
+            { no: 5, sub: "Agenda", uraian: "Agenda A 1935. Doorloppend nummer 1-204. (2595).", kurun: "3 Januari 1935-23 Desember 1935", kondisi: "Goed" },
+            { no: 6, sub: "Agenda", uraian: "Agenda A 1936. Doorloopend nummer 1-246. (2506). (2596)", kurun: "16 Januari 1936-31 Desember 1936", kondisi: "Zwaar licht beschadigd, fungus" },
+            { no: 7, sub: "Agenda", uraian: "Agenda A 1937. Doorloopend nummer 1-487. (2597).", kurun: "2 Januari 1937-30 Desember 1937", kondisi: "Goed licht beschadigd, fungus" },
+            { no: 8, sub: "Agenda", uraian: "Agenda A 1938. Doorloopend nummer 1-503. (2598).", kurun: "2 Januari 1938-31 Desember 1938", kondisi: "Zwaar beschadigd, fungus" },
+            { no: 9, sub: "Agenda", uraian: "Agenda A 1939. Doorloopend nummer 1-486.", kurun: "2 Januari 1939-28 Desember 1939", kondisi: "Zwaar beschadigd, fungus" },
+            { no: 10, sub: "Agenda", uraian: "Agenda A 1940. Doorloopend nummer 1-414. (2600).", kurun: "2 Januari 1940-31 Desember 1940", kondisi: "Zwaar beschadigd, fungus" },
+            { no: 11, sub: "Agendaboek", uraian: "Inkomende en uitgaande Agenda P20, Kaulbach-systeem 1-25, Deel I en II, 1950.", kurun: "1 Januari 1950-17 Desember 1950", kondisi: "Goed" },
+            { no: 12, sub: "Agendaboek", uraian: "Inkomende (Agenda Boek) 1950, Nummer 1-1972.", kurun: "28 Januari 1950 - 16 November 1950", kondisi: "Goed" },
+            { no: 13, sub: "Agendaboek", uraian: "Inkomende en uitgaande Agenda D1-E1-F1-G1, Kaulbach-systeem 1-25, Deel I en II, 1950.", kurun: "28 Desember 1950-21 Desember 1951", kondisi: "Fungus" },
+            { no: 14, sub: "Bundel Tecnish Economische", uraian: "Bundel Technish Economische Afdeeling Alfabetis A-Z.", kurun: "1923-1923", kondisi: "Licht beschadigd" },
+            { no: 15, sub: "Bundel Tecnish Economische", uraian: "Bundel Technish Economische Afdeeling Maand A-Z, Maand Bangkatinwinning, Maand Oimbilinmijnen, Maand Boekit Asammijnen, Maand Brikettenfabriek, Maand Goudon Tambak Sawah, Maand Tinrestriche, Maand Gem bijnks bij, Maand P. Laoetmijnen, Maand Hoofdkantoor Mijnbouw.", kurun: "8 April 1905-25 April 1905", kondisi: "Licht beschadigd" },
+            { no: 16, sub: "Controle Agenda", uraian: "Controle 1909. VI-M 2. 63. (2569). Doorloopend controle nummer 1-544.", kurun: "6 September 1909-13 Januari 1911", kondisi: "Licht beschadigd, mieren" },
+            { no: 17, sub: "Controle Agenda", uraian: "Controle Agenda M 1928. VI-M 4. No. 1-22110.", kurun: "1928-1928", kondisi: "Licht beschadigd, fungus" },
+            { no: 18, sub: "Controle Agenda", uraian: "Controle Agenda 1929. VI-M 5. No. 86957-113757 (di sampul). No. 1-19040.", kurun: "Januari 1929-1929", kondisi: "Licht beschadigd, fungus" },
+            { no: 19, sub: "Controle Agenda", uraian: "Controle Agenda 1931. VI.M 6, nummer 1-16654.", kurun: "1931-1931", kondisi: "Zwaar beschadigd, fungus" },
+            { no: 20, sub: "Controle Agenda", uraian: "Controle Agenda 1934-1935. VI-M 7. No. 1-16230 (1934). No. 1-16503 (1935)", kurun: "1934-1935", kondisi: "Licht beschadigd, fungus" },
+            { no: 21, sub: "Controle Verbalen", uraian: "Controle Verbalen 1927, Nummer 1-11780", kurun: "1927-1927", kondisi: "Licht beschadigd" },
+            { no: 22, sub: "Expeditie", uraian: "Expeditie Tevens Brievenboek Afdeeling V.en Model Arch 8A Folio 4-163", kurun: "3 Januari 1939-3 Juli 1939", kondisi: "Zwaar beschadigd" },
+            { no: 23, sub: "Geheim Agenda", uraian: "Agende Geheim en verbalen 1903-1919.", kurun: "28 Februari 1903-9 Mei 1919", kondisi: "Goed" },
+            { no: 24, sub: "Geheim Agenda", uraian: "Agenda Geheim 1927, 1928, 1929, Doorlopend nummer 231-281 (1927), 1-281 (1928), 1-184 (1929)", kurun: "21 Juli 1927-8 Juni 1929", kondisi: "Goed" },
+            { no: 25, sub: "Geheim Agenda", uraian: "Agenda Geheim 1933-1937, Doorlopend nummer 1-754 (1933), 1-290 (1934), 1-374 (1935), 1-438 (1936), 1-200 (1937)", kurun: "30 Desember 1933-17 Juni 1937", kondisi: "Goed" },
+            { no: 26, sub: "Geheim Agenda", uraian: "Geheime Agenda 1937 t/m 1940. Agenda geheim. (2597/2600)", kurun: "1 Juli 1937-23 Desember 1940", kondisi: "Zwaar beschadigd, fungus" },
+            { no: 27, sub: "Geheime Directie-Verbalen", uraian: "Geheime Directie-Verbalen 1929 t/m 1942.", kurun: "2 Desember 1929-13 Februari 1942", kondisi: "Mieren" },
+            { no: 28, sub: "Index", uraian: "Index Besluiten Registen Opsporingsdienst 3, Alfabetis A-W", kurun: "TT", kondisi: "Goed" },
+            { no: 29, sub: "Index", uraian: "Index Controle 1919 Deel VI-M.3 Alfabetis A-W", kurun: "1919-1919", kondisi: "Licht beschadigd, fungus" },
+            { no: 30, sub: "Index", uraian: "Index Folio Directie Deel I, VI-I, 49, Bladzijde 1-399, 1925", kurun: "12 Desember 1924-26 Mei 1925", kondisi: "Licht beschadigd" }
+         ];
+        // Function to clean and format raw data, now assigning varied locations
+        function processRawData(rawData, boxIds) {
+            const processedData = [];
+            const count = Math.min(rawData.length, MAX_ARCHIVES_TO_LOAD); // Limit to 30
+            // Define specific, varied box locations for the 30 archives
+            const variedLocations = [
+                'B1-R1-S1-N1', 'B1-R1-S3-N3', 'B1-R1-S5-N2',
+                'B1-R3-S2-N4', 'B1-R3-S4-N1', 'B1-R5-S1-N3',
+                'B1-R5-S3-N1', 'B2-R2-S2-N2', 'B2-R2-S4-N4',
+                'B2-R2-S5-N1', 'B2-R4-S1-N1', 'B2-R4-S3-N3',
+                'B2-R6-S2-N1', 'B2-R6-S5-N4', 'B3-R1-S1-N4',
+                'B3-R1-S4-N2', 'B3-R3-S3-N1', 'B3-R3-S5-N3',
+                'B3-R5-S2-N2', 'B3-R5-S4-N4', 'B4-R2-S1-N3',
+                'B4-R2-S3-N1', 'B4-R2-S5-N4', 'B4-R4-S2-N1',
+                'B4-R4-S4-N3', 'B4-R6-S1-N2', 'B4-R6-S3-N4',
+                'B4-R6-S5-N1', 'B1-R2-S1-N1', 'B2-R3-S1-N2'
+            ];
+            for (let index = 0; index < count; index++) {
+                 const item = rawData[index];
+                const nama_arsip = item.uraian?.replace(/\n/g, ' ').replace(/"/g, '').trim() || `Arsip Tidak Bernama ${index + 1}`;
+                const deskripsi = item.sub?.replace(/\n/g, ' ').replace(/"/g, '').trim() || "Tidak Ada Deskripsi";
+                const kondisi = item.kondisi?.replace(/\n/g, ' ').replace(/"/g, '').trim() || "Tidak Diketahui";
+                let tahun = "TT";
+                if (item.kurun && typeof item.kurun === 'string') {
+                    const yearMatch = item.kurun.match(/\d{4}/g);
+                    if (yearMatch) {
+                        if (yearMatch.length > 1) {
+                            const startYear = parseInt(yearMatch[0]);
+                            const endYear = parseInt(yearMatch[yearMatch.length - 1]);
+                            tahun = (startYear <= endYear) ? `${startYear}-${endYear}` : `${endYear}-${startYear}`;
+                        } else {
+                            tahun = yearMatch[0];
+                        }
+                    } else if (item.kurun.trim().toUpperCase() !== 'TT') {
+                         tahun = item.kurun.trim();
+                    }
+                }
+                processedData.push({
+                    id: `ARSIP-${String(index + 1).padStart(3, '0')}`,
+                    nama_arsip: nama_arsip,
+                    deskripsi: deskripsi,
+                    tahun: tahun,
+                    kategori: deskripsi,
+                    lokasi_rak: variedLocations[index], // Assign varied location
+                    kondisi: kondisi,
+                    format: "Kertas"
+                });
+            }
+            return processedData;
+        }
+        // === Shelves and Boxes (Roll O Pack Style - Facing Each Other) ===
+        const boxGeometry = new THREE.BoxGeometry(0.4, 0.3, 0.5);
+        const boxMaterial = new THREE.MeshStandardMaterial({ color: 0xdeb887 });
+        const shelfWidth = 2;
+        const shelfDepth = 0.6;
+        const shelfHeight = 2;
+        const shelfLevels = 5;
+        const shelfBoardThickness = 0.05;
+        const panelThickness = 0.05;
+        const shelfColor = 0xAAAAAA;
+        const panelColor = 0x999999;
+        const handleColor = 0x555555;
+        const railColor = 0x777777;
+        const numShelfRows = 4;
+        const shelvesPerDoubleRow = 6;
+        const rowSpacing = 4;
+        const pairSpacingZ = 2.0;
+        const aisleWidthFacing = 1.8;
+        const railHeight = 0.02;
+        const railWidth = 0.04;
+        const railSpacing = 0.4;
+        const boxesPerLevel = 4;
+        const numPairsPerRow = shelvesPerDoubleRow / 2;
+        const startZ = - (numPairsPerRow - 1) * pairSpacingZ / 2;
+        const startX = - (numShelfRows - 1) * rowSpacing / 2;
+        // Generate all possible box IDs based on the layout
+        const allBoxIds = generateBoxIds(numShelfRows, shelvesPerDoubleRow, shelfLevels, boxesPerLevel);
+        // Process the raw data (first 30 entries) and map it to the varied box IDs
+        let defaultDummyData = processRawData(rawPdfData, allBoxIds); // Use let
+        // --- Heatmap Colors ---
+        const colorCold = new THREE.Color(0x0000ff); // Blue
+        const colorIdeal = new THREE.Color(0x00ff00); // Green
+        const colorHot = new THREE.Color(0xff0000); // Red
+        function createSceneContent() {
+            // Clear existing objects
+            shelves.forEach(shelf => scene.remove(shelf));
+            boxes.forEach(box => { if (box.parent) box.parent.remove(box); });
+            shelfLabels.forEach(label => { label.element.remove(); if(label.parent) label.parent.remove(label); });
+            rails.forEach(rail => scene.remove(rail));
+            shelfPanels.length = 0; // *** Clear shelf panels array ***
+            shelves.length = 0;
+            boxes.length = 0;
+            shelfLabels.length = 0;
+            rails.length = 0;
+            let boxCreationCounter = 0;
+            let shelfCreationIndex = 0;
+            const shelfMaterial = new THREE.MeshStandardMaterial({ color: shelfColor });
+            const panelMaterial = new THREE.MeshStandardMaterial({ color: panelColor, vertexColors: false });
+            const handleMaterial = new THREE.MeshStandardMaterial({ color: handleColor });
+            const railMaterial = new THREE.MeshStandardMaterial({ color: railColor });
+            // --- Create Rails (Two per shelf) ---
+            const singleRailLength = shelfWidth;
+            const railGeometry = new THREE.BoxGeometry(singleRailLength, railHeight, railWidth);
+            for (let r = 0; r < numShelfRows; r++) {
+                const railX = startX + r * rowSpacing;
+                const railY = floor.position.y + railHeight / 2 + 0.001;
+                for (let p = 0; p < numPairsPerRow; p++) {
+                    const pairCenterZ = startZ + p * pairSpacingZ;
+                    // Rails for Left Shelf
+                    const leftShelfCenterZ = pairCenterZ - aisleWidthFacing / 2;
+                    const railLeftFront = new THREE.Mesh(railGeometry, railMaterial);
+                    railLeftFront.position.set(railX, railY, leftShelfCenterZ + railSpacing / 2);
+                    railLeftFront.receiveShadow = true;
+                    scene.add(railLeftFront);
+                    rails.push(railLeftFront);
+                    const railLeftBack = new THREE.Mesh(railGeometry, railMaterial);
+                    railLeftBack.position.set(railX, railY, leftShelfCenterZ - railSpacing / 2);
+                    railLeftBack.receiveShadow = true;
+                    scene.add(railLeftBack);
+                    rails.push(railLeftBack);
+                    // Rails for Right Shelf
+                    const rightShelfCenterZ = pairCenterZ + aisleWidthFacing / 2;
+                    const railRightFront = new THREE.Mesh(railGeometry, railMaterial);
+                    railRightFront.position.set(railX, railY, rightShelfCenterZ + railSpacing / 2);
+                    railRightFront.receiveShadow = true;
+                    scene.add(railRightFront);
+                    rails.push(railRightFront);
+                    const railRightBack = new THREE.Mesh(railGeometry, railMaterial);
+                    railRightBack.position.set(railX, railY, rightShelfCenterZ - railSpacing / 2);
+                    railRightBack.receiveShadow = true;
+                    scene.add(railRightBack);
+                    rails.push(railRightBack);
+                }
+            }
+            // --- Create Shelves ---
+            for (let r = 0; r < numShelfRows; r++) {
+                for (let s = 0; s < shelvesPerDoubleRow; s++) {
+                    const shelfGroup = new THREE.Group();
+                    shelfGroup.userData.creationIndex = shelfCreationIndex++;
+                    const shelfX = startX + r * rowSpacing;
+                    const pairIndex = Math.floor(s / 2);
+                    const isRightShelf = s % 2 !== 0;
+                    const currentPairCenterZ = startZ + pairIndex * pairSpacingZ;
+                    let shelfZ;
+                    let rotationY = 0;
+                    if (isRightShelf) {
+                        shelfZ = currentPairCenterZ + aisleWidthFacing / 2;
+                        rotationY = Math.PI;
+                    } else {
+                        shelfZ = currentPairCenterZ - aisleWidthFacing / 2;
+                        rotationY = 0;
+                    }
+                    // --- Roll O Pack Structure ---
+                    const sidePanelLeftMat = panelMaterial.clone();
+                    const sidePanelRightMat = panelMaterial.clone();
+                    const backPanelMat = panelMaterial.clone();
+                    const topPanelMat = panelMaterial.clone();
+                    const sidePanelLeftGeo = new THREE.BoxGeometry(panelThickness, shelfHeight, shelfDepth);
+                    const sidePanelLeft = new THREE.Mesh(sidePanelLeftGeo, sidePanelLeftMat);
+                    sidePanelLeft.position.set(-shelfWidth / 2 + panelThickness / 2, 0, 0);
+                    sidePanelLeft.castShadow = true; sidePanelLeft.receiveShadow = true;
+                    shelfGroup.add(sidePanelLeft);
+                    shelfPanels.push(sidePanelLeft); // *** Add panel to array for raycasting ***
+                    const sidePanelRightGeo = new THREE.BoxGeometry(panelThickness, shelfHeight, shelfDepth);
+                    const sidePanelRight = new THREE.Mesh(sidePanelRightGeo, sidePanelRightMat);
+                    sidePanelRight.position.set(shelfWidth / 2 - panelThickness / 2, 0, 0);
+                    sidePanelRight.castShadow = true; sidePanelRight.receiveShadow = true;
+                    shelfGroup.add(sidePanelRight);
+                    shelfPanels.push(sidePanelRight); // *** Add panel to array for raycasting ***
+                    const backPanelGeo = new THREE.BoxGeometry(shelfWidth - 2 * panelThickness, shelfHeight, panelThickness);
+                    const backPanel = new THREE.Mesh(backPanelGeo, backPanelMat);
+                    backPanel.position.set(0, 0, -shelfDepth / 2 + panelThickness / 2);
+                    backPanel.castShadow = true; backPanel.receiveShadow = true;
+                    shelfGroup.add(backPanel);
+                    shelfPanels.push(backPanel); // *** Add panel to array for raycasting ***
+                    const topPanelGeo = new THREE.BoxGeometry(shelfWidth - 2* panelThickness, panelThickness, shelfDepth);
+                    const topPanel = new THREE.Mesh(topPanelGeo, topPanelMat);
+                    topPanel.position.set(0, shelfHeight / 2 - panelThickness / 2, 0);
+                    topPanel.castShadow = true; topPanel.receiveShadow = true;
+                    shelfGroup.add(topPanel);
+                    shelfPanels.push(topPanel); // *** Add panel to array for raycasting ***
+                    // Store references to the panel meshes in the group's userData for easy access
+                    shelfGroup.userData.panels = [sidePanelLeft, sidePanelRight, backPanel, topPanel];
+                    shelfGroup.userData.originalPanelMaterial = panelMaterial; // Store the base material
+                    // *** Assign initial temperature based on anomaly list ***
+                    if (ANOMALY_SHELF_INDICES.includes(shelfGroup.userData.creationIndex)) {
+                         shelfGroup.userData.temperature = (shelfGroup.userData.creationIndex === 5)
+                            ? TEMP_HOT - Math.random() * 3 // Hotter anomaly
+                            : TEMP_COLD + Math.random() * 3; // Colder anomaly
+                         shelfGroup.userData.isAnomalous = true;
+                    } else {
+                         shelfGroup.userData.temperature = baseTemp + (Math.random() * 4 - 2); // Normal initial temp
+                         shelfGroup.userData.isAnomalous = false;
+                    }
+                    // --- Add Rotating Handle ---
+                    const handleRadius = 0.08;
+                    const handleHeight = 0.05;
+                    const handleSegments = 16;
+                    const handleGeometry = new THREE.CylinderGeometry(handleRadius, handleRadius, handleHeight, handleSegments);
+                    const handle = new THREE.Mesh(handleGeometry, handleMaterial);
+                    const handleX = isRightShelf
+                        ? (shelfWidth / 2 - panelThickness / 2 - handleHeight / 2)
+                        : (-shelfWidth / 2 + panelThickness / 2 + handleHeight / 2);
+                    const handleY = 0;
+                    const handleZ = shelfDepth / 2 - handleRadius * 1.5;
+                    handle.position.set(handleX, handleY, handleZ);
+                    handle.rotation.z = Math.PI / 2;
+                    handle.castShadow = true;
+                    shelfGroup.add(handle);
+                    // --- Shelf Boards and Boxes ---
+                    const boardWidth = shelfWidth - 2 * panelThickness;
+                    const boardGeometry = new THREE.BoxGeometry(boardWidth, shelfBoardThickness, shelfDepth - panelThickness);
+                    for (let i = 0; i < shelfLevels; i++) {
+                        const boardY = -shelfHeight / 2 + shelfBoardThickness / 2 + i * (shelfHeight / (shelfLevels)); // Adjusted spacing slightly
+                        const board = new THREE.Mesh(boardGeometry, shelfMaterial.clone()); // Clone shelf material too if needed
+                        board.position.set(0, boardY, 0);
+                        board.castShadow = true; board.receiveShadow = true;
+                        shelfGroup.add(board);
+                        const boxStartX = -boardWidth / 2 + 0.25;
+                        const boxSpacingX = 0.5;
+                        for (let b = 0; b < boxesPerLevel; b++) {
+                             // Use the pre-generated ID based on the overall counter
+                            const boxId = allBoxIds[boxCreationCounter];
+                            // Only create a box if an ID exists for it
+                            if (!boxId) break;
+                            if (boxStartX + b * boxSpacingX + 0.4 / 2 > boardWidth / 2) continue;
+                            const box = new THREE.Mesh(boxGeometry, boxMaterial.clone());
+                            const boxX = boxStartX + b * boxSpacingX;
+                            const boxY = boardY + shelfBoardThickness / 2 + 0.3 / 2;
+                            const boxZ = 0;
+                            box.position.set(boxX, boxY, boxZ);
+                            box.castShadow = true; box.receiveShadow = true;
+                            box.userData = {
+                                id: boxId, // Assign the correct sequential ID
+                                originalMaterial: boxMaterial.clone(),
+                                archiveInfo: null, // Will be linked by linkArchiveDataToBoxes
+                                isBlinking: false
+                            };
+                            shelfGroup.add(box);
+                            boxes.push(box);
+                            boxCreationCounter++; // Increment the counter for the next box
+                        }
+                         if (boxCreationCounter >= allBoxIds.length) break; // Stop creating levels if done
+                    }
+                     if (boxCreationCounter >= allBoxIds.length) break; // Stop creating shelves if done
+                     // --- Add Shelf Label ---
+                     const shelfLabelDiv = document.createElement('div');
+                     shelfLabelDiv.className = 'shelf-label';
+                     shelfLabelDiv.textContent = `Rak B${r + 1}-R${s + 1}`;
+                     const shelfLabel = new THREE.CSS2DObject(shelfLabelDiv);
+                     const labelZOffset = shelfDepth / 2 + 0.1;
+                     shelfLabel.position.set(0, shelfHeight / 2 + 0.2, labelZOffset);
+                     shelfGroup.add(shelfLabel);
+                     shelfLabels.push(shelfLabel);
+                    // Position and rotate the entire shelf group
+                    shelfGroup.position.set(shelfX, -roomHeight / 2 + shelfHeight / 2, shelfZ);
+                    shelfGroup.rotation.y = rotationY;
+                    scene.add(shelfGroup);
+                    shelves.push(shelfGroup);
+                }
+                 if (boxCreationCounter >= allBoxIds.length) break; // Stop creating rows if done
+            }
+            totalBoxesCreated = boxes.length; // Store the total number of boxes created
+            console.log(`Created ${shelves.length} shelves, ${totalBoxesCreated} boxes, ${shelfLabels.length} labels, and ${rails.length} rail segments.`);
+            linkArchiveDataToBoxes(); // Link the defaultDummyData (now limited to 30)
+            populateArchiveList(archiveData); // Populate list with the limited data
+            buildNavigationGrid(); // *** Build the grid after creating shelves ***
+        }
+        // === Archive List Population ===
+        const archiveListElement = document.getElementById('archive-list');
+        function populateArchiveList(data) { /* ... (populateArchiveList function remains the same) ... */
+             archiveListElement.innerHTML = '';
+             if (!archiveData || archiveData.length === 0) {
+                 archiveListElement.innerHTML = '<li>Data arsip kosong. Muat ulang atau unggah file JSON.</li>';
+                 return;
+             }
+             archiveData.forEach(item => {
+                 if (item.nama_arsip && item.lokasi_rak) {
+                     const listItem = document.createElement('li');
+                     listItem.textContent = item.nama_arsip;
+                     listItem.title = `${item.nama_arsip} (ID: ${item.id || 'N/A'}, Lokasi: ${item.lokasi_rak})`;
+                     listItem.dataset.location = item.lokasi_rak;
+                     listItem.dataset.archiveId = item.id || '';
+                     archiveListElement.appendChild(listItem);
+                 }
+             });
+        }
+        // === Link Archive Data to 3D Boxes ===
+        function linkArchiveDataToBoxes() { /* ... (linkArchiveDataToBoxes function remains the same) ... */
+             occupiedBoxesCount = 0;
+             if (!archiveData || archiveData.length === 0) {
+                 console.log("No archive data to link.");
+                 updateStorageInfo();
+                 return;
+             }
+             boxes.forEach(box => {
+                 box.userData.archiveInfo = null;
+                 box.userData.isBlinking = false;
+                  if (box.material !== box.userData.originalMaterial && highlightedBox !== box) {
+                     if(box.userData.originalMaterial) {
+                        box.material = box.userData.originalMaterial;
+                     } else {
+                        box.material = boxMaterial;
+                     }
+                  }
+             });
+             let linkedCount = 0;
+             archiveData.forEach(item => {
+                 if (item.lokasi_rak) {
+                     const targetBox = boxes.find(box => box.userData.id.toUpperCase() === item.lokasi_rak.toUpperCase());
+                     if (targetBox) {
+                         targetBox.userData.archiveInfo = item;
+                         linkedCount++;
+                     }
+                 } else {
+                      console.warn(`Archive item "${item.nama_arsip || item.id}" is missing 'lokasi_rak'.`);
+                 }
+             });
+             occupiedBoxesCount = linkedCount;
+             console.log(`Linked ${linkedCount} archive data items to ${boxes.length} 3D boxes.`);
+             updateStorageInfo();
+        }
+        // === Controls ===
+        const orbitControls = new THREE.OrbitControls(camera, renderer.domElement); /* ... (OrbitControls setup remains the same) ... */
+         orbitControls.enableDamping = true;
+         orbitControls.dampingFactor = 0.05;
+         orbitControls.screenSpacePanning = false;
+         orbitControls.maxPolarAngle = Math.PI / 1.9;
+         orbitControls.minDistance = 1;
+         orbitControls.maxDistance = 50;
+         orbitControls.target.set(0, 0, 0);
+        const pointerLockControls = new THREE.PointerLockControls(camera, document.body); /* ... (PointerLockControls setup remains the same) ... */
+         scene.add(pointerLockControls.getObject());
+        let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
+        const velocity = new THREE.Vector3();
+        const direction = new THREE.Vector3();
+        const moveSpeed = 5.0;
+        const onKeyDown = (event) => { if (!pointerLockControls.isLocked) return; switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = true; break; case 'ArrowLeft': case 'KeyA': moveLeft = true; break; case 'ArrowDown': case 'KeyS': moveBackward = true; break; case 'ArrowRight': case 'KeyD': moveRight = true; break; } };
+        const onKeyUp = (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = false; break; case 'ArrowLeft': case 'KeyA': moveLeft = false; break; case 'ArrowDown': case 'KeyS': moveBackward = false; break; case 'ArrowRight': case 'KeyD': moveRight = false; break; } };
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('keyup', onKeyUp);
+        pointerLockControls.addEventListener('lock', () => { /* instructions.style.display = 'none'; */ controlsContainer.style.display = 'none'; archiveListContainer.style.display = 'none'; labelRenderer.domElement.style.display = 'none'; environmentInfoPanel.style.display = 'none'; analyticsPanel.style.display = 'none'; }); // Hide panels in FPV
+        pointerLockControls.addEventListener('unlock', () => { /* instructions.style.display = 'block'; */ controlsContainer.style.display = 'flex'; archiveListContainer.style.display = 'block'; moveForward = moveBackward = moveLeft = moveRight = false; velocity.set(0, 0, 0); labelRenderer.domElement.style.display = 'block'; environmentInfoPanel.style.display = 'block'; analyticsPanel.style.display = 'block'; }); // Show panels in Orbit
+        renderer.domElement.addEventListener('click', () => { if (!isOrbitView && !pointerLockControls.isLocked) pointerLockControls.lock(); });
+        // === View Toggle ===
+        let isOrbitView = true;
+        const toggleViewButton = document.getElementById('toggle-view-button');
+        // const instructions = document.getElementById('instructions'); // Removed reference
+        const controlsContainer = document.getElementById('controls-container');
+        const archiveListContainer = document.getElementById('archive-list-container');
+        const environmentInfoPanel = document.getElementById('environment-info');
+        const analyticsPanel = document.getElementById('analytics-panel'); // Get reference
+        camera.position.set(roomWidth * 0.6, roomHeight * 1.2, roomDepth * 0.6);
+        orbitControls.update();
+        toggleViewButton.addEventListener('click', () => {
+            isOrbitView = !isOrbitView;
+            if (isOrbitView) {
+                // Switch TO Orbit View
+                if (pointerLockControls.isLocked) pointerLockControls.unlock(); // Unlock first
+                pointerLockControls.enabled = false;
+                orbitControls.enabled = true;
+                archiveListContainer.style.display = 'block';
+                labelRenderer.domElement.style.display = 'block'; // Show labels
+                environmentInfoPanel.style.display = 'block'; // Show env info
+                analyticsPanel.style.display = 'block'; // Show analytics
+                toggleViewButton.textContent = 'Ganti ke Mode Jalan';
+                // instructions.innerHTML = `...`; // Removed update
+                const fpvPosition = pointerLockControls.getObject().position;
+                camera.position.copy(fpvPosition);
+                camera.position.y = Math.max(camera.position.y, -roomHeight / 2 + 0.5);
+                const lookDirection = new THREE.Vector3();
+                camera.getWorldDirection(lookDirection);
+                orbitControls.target.copy(fpvPosition).add(lookDirection.multiplyScalar(2));
+                orbitControls.update();
+            } else {
+                // Switch TO First-Person View
+                orbitControls.enabled = false;
+                pointerLockControls.enabled = true;
+                archiveListContainer.style.display = 'none';
+                labelRenderer.domElement.style.display = 'none'; // Hide labels
+                environmentInfoPanel.style.display = 'none'; // Hide env info
+                analyticsPanel.style.display = 'none'; // Hide analytics
+                toggleViewButton.textContent = 'Ganti ke Mode Orbit';
+                // instructions.innerHTML = `...`; // Removed update
+                pointerLockControls.getObject().position.y = (-roomHeight / 2) + playerEyeHeight;
+                pointerLockControls.getObject().position.x = camera.position.x;
+                pointerLockControls.getObject().position.z = camera.position.z;
+            }
+        });
+        // === JSON File Upload (REMOVED) ===
+        // const jsonUploadInput = document.getElementById('json-upload');
+        // jsonUploadInput.addEventListener('change', (event) => { ... });
+        // === A* Pathfinding Implementation ===
+        class PathNode {
+            constructor(x, z, g = 0, h = 0, parent = null) {
+                this.x = x; // Grid x coordinate
+                this.z = z; // Grid z coordinate (using z for grid height)
+                this.g = g; // Cost from start
+                this.h = h; // Heuristic cost to end
+                this.f = g + h; // Total cost
+                this.parent = parent; // Parent node for path reconstruction
+            }
+            // Helper to check if two nodes are the same position
+            equals(otherNode) {
+                return this.x === otherNode.x && this.z === otherNode.z;
+            }
+        }
+        // Heuristic function (Manhattan distance)
+        function heuristic(nodeA, nodeB) {
+            return Math.abs(nodeA.x - nodeB.x) + Math.abs(nodeA.z - nodeB.z);
+        }
+        function findPathAStar(startX, startZ, endX, endZ) {
+            const startNode = new PathNode(startX, startZ);
+            const endNode = new PathNode(endX, endZ);
+            const openList = [startNode];
+            const closedList = [];
+            while (openList.length > 0) {
+                // Find node with lowest f score in openList
+                let lowestFIndex = 0;
+                for (let i = 1; i < openList.length; i++) {
+                    if (openList[i].f < openList[lowestFIndex].f) {
+                        lowestFIndex = i;
+                    }
+                }
+                const currentNode = openList[lowestFIndex];
+                // Move current node from open to closed list
+                openList.splice(lowestFIndex, 1);
+                closedList.push(currentNode);
+                // Check if we reached the end
+                if (currentNode.equals(endNode)) {
+                    // Reconstruct path
+                    const path = [];
+                    let temp = currentNode;
+                    while (temp !== null) {
+                        path.push({ x: temp.x, z: temp.z });
+                        temp = temp.parent;
+                    }
+                    return path.reverse(); // Return path from start to end
+                }
+                // Get neighbors (up, down, left, right)
+                const neighbors = [];
+                const directions = [[0, 1], [0, -1], [1, 0], [-1, 0]]; // Right, Left, Down, Up
+                for (const dir of directions) {
+                    const neighborX = currentNode.x + dir[0];
+                    const neighborZ = currentNode.z + dir[1];
+                    // Check bounds and if walkable
+                    if (neighborX >= 0 && neighborX < gridWidth &&
+                        neighborZ >= 0 && neighborZ < gridHeight &&
+                        navigationGrid[neighborZ][neighborX] === 0) { // 0 means walkable
+                        neighbors.push(new PathNode(neighborX, neighborZ));
+                    }
+                }
+                // Process neighbors
+                for (const neighbor of neighbors) {
+                    // Skip if neighbor is in closed list
+                    if (closedList.some(node => node.equals(neighbor))) {
+                        continue;
+                    }
+                    const gScore = currentNode.g + 1; // Assuming cost of 1 for adjacent move
+                    let gScoreIsBest = false;
+                    // Check if neighbor is not in open list
+                    const openNodeIndex = openList.findIndex(node => node.equals(neighbor));
+                    if (openNodeIndex === -1) {
+                        gScoreIsBest = true;
+                        neighbor.h = heuristic(neighbor, endNode);
+                        openList.push(neighbor);
+                    } else if (gScore < openList[openNodeIndex].g) {
+                        gScoreIsBest = true;
+                    }
+                    if (gScoreIsBest) {
+                        neighbor.parent = currentNode;
+                        neighbor.g = gScore;
+                        neighbor.f = neighbor.g + neighbor.h;
+                         // If neighbor was already in openList, update it (needed if using Priority Queue)
+                         // For simple array, adding again works but is less efficient.
+                         // If already in open list and score improved, update its parent and scores.
+                         if (openNodeIndex !== -1) {
+                             openList[openNodeIndex] = neighbor;
+                         }
+                    }
+                }
+            }
+            // No path found
+            console.warn("A* Pathfinding: No path found!");
+            return null;
+        }
+        // Function to convert world coordinates to grid coordinates
+        function worldToGrid(worldX, worldZ) {
+             const gridX = Math.floor((worldX - gridOriginOffset.x) / GRID_RESOLUTION);
+             const gridZ = Math.floor((worldZ - gridOriginOffset.z) / GRID_RESOLUTION);
+             // Clamp to grid boundaries
+             const clampedX = Math.max(0, Math.min(gridWidth - 1, gridX));
+             const clampedZ = Math.max(0, Math.min(gridHeight - 1, gridZ));
+             return { x: clampedX, z: clampedZ };
+        }
+        // Function to convert grid coordinates back to world coordinates (center of cell)
+        function gridToWorld(gridX, gridZ) {
+             const worldX = gridX * GRID_RESOLUTION + gridOriginOffset.x + GRID_RESOLUTION / 2;
+             const worldZ = gridZ * GRID_RESOLUTION + gridOriginOffset.z + GRID_RESOLUTION / 2;
+             return new THREE.Vector3(worldX, -roomHeight / 2 + 0.1, worldZ); // Y slightly above floor
+        }
+        // Function to build the navigation grid
+        function buildNavigationGrid() {
+            gridWidth = Math.ceil(roomWidth / GRID_RESOLUTION);
+            gridHeight = Math.ceil(roomDepth / GRID_RESOLUTION);
+            gridOriginOffset.x = -roomWidth / 2;
+            gridOriginOffset.z = -roomDepth / 2;
+            // Initialize grid with 0 (walkable)
+            navigationGrid = Array(gridHeight).fill(null).map(() => Array(gridWidth).fill(0));
+            // Mark cells occupied by shelves as 1 (blocked)
+            shelves.forEach(shelf => {
+                const shelfPos = shelf.position;
+                const halfShelfWidth = shelfWidth / 2;
+                const halfShelfDepth = shelfDepth / 2; // Use actual shelf depth
+                // Calculate bounding box in world coordinates, considering rotation
+                // Create a temporary Box3 helper
+                const boxHelper = new THREE.Box3();
+                // Set the helper from the shelf group (which includes all panels)
+                // This automatically considers the group's position and rotation
+                boxHelper.setFromObject(shelf);
+                // Convert world bounds to grid bounds
+                const minGrid = worldToGrid(boxHelper.min.x, boxHelper.min.z);
+                const maxGrid = worldToGrid(boxHelper.max.x, boxHelper.max.z);
+                // Mark grid cells within the bounds as blocked
+                for (let z = minGrid.z; z <= maxGrid.z; z++) {
+                    for (let x = minGrid.x; x <= maxGrid.x; x++) {
+                        if (x >= 0 && x < gridWidth && z >= 0 && z < gridHeight) {
+                            navigationGrid[z][x] = 1; // Mark as blocked
+                        }
+                    }
+                }
+            });
+             console.log("Navigation grid built.");
+             // console.log(navigationGrid); // Optional: Log grid for debugging
+        }
+        // === Pathfinding and Highlighting Logic (dipicu oleh klik daftar) ===
+        let highlightedBox = null;
+        let pathLine = null;
+        const blinkMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0x555500 });
+        const pathMaterialBlue = new THREE.LineBasicMaterial({ color: 0x0000ff, linewidth: 5 });
+        const avgRetrievalTimeElement = document.getElementById('avg-retrieval-time');
+        function findAndShowPath(locationId) {
+            const normalizedLocationId = locationId.trim().toUpperCase();
+            if (!normalizedLocationId) return;
+            // Reset previous highlight and path
+            if (highlightedBox) {
+                highlightedBox.userData.isBlinking = false;
+                if (highlightedBox.userData.originalMaterial) {
+                    highlightedBox.material = highlightedBox.userData.originalMaterial;
+                } else {
+                     highlightedBox.material = boxMaterial;
+                }
+                 const parentShelf = highlightedBox.parent;
+                 if (parentShelf && parentShelf.userData.panels) {
+                     const tempColor = getTemperatureColor(parentShelf.userData.temperature);
+                     parentShelf.userData.panels.forEach(panel => {
+                         panel.material.color.copy(tempColor);
+                     });
+                 }
+                highlightedBox = null;
+            }
+            if (pathLine) {
+                scene.remove(pathLine);
+                pathLine.geometry.dispose();
+                pathLine = null;
+            }
+            const currentlySelected = archiveListElement.querySelector('.selected');
+            if (currentlySelected) {
+                currentlySelected.classList.remove('selected');
+            }
+            let foundBox = null;
+            let archiveInfo = null;
+            const pathMaterial = pathMaterialBlue;
+            foundBox = boxes.find(box => box.userData.id.toUpperCase() === normalizedLocationId);
+            if (foundBox) {
+                 archiveInfo = foundBox.userData.archiveInfo;
+                 if (!archiveInfo || archiveInfo.nama_arsip?.startsWith("(Data Arsip Kosong")) {
+                    showMessage(`Boks ${foundBox.userData.id} kosong (tidak ada data arsip).`, true);
+                    const listItem = archiveListElement.querySelector(`li[data-location="${locationId}"]`);
+                    if (listItem) {
+                         listItem.classList.remove('selected');
+                     }
+                    return;
+                 }
+                 accessFrequency[locationId] = (accessFrequency[locationId] || 0) + 1;
+                 const listItem = archiveListElement.querySelector(`li[data-location="${locationId}"]`);
+                 if (listItem) {
+                     listItem.classList.add('selected');
+                 }
+                highlightedBox = foundBox;
+                highlightedBox.userData.isBlinking = true;
+                if (!highlightedBox.userData.originalMaterial) {
+                    highlightedBox.userData.originalMaterial = highlightedBox.material.clone();
+                }
+                highlightedBox.material = blinkMaterial;
+                // --- Path Calculation using A* ---
+                const pathStartY = -roomHeight / 2 + 0.1;
+                const startWorld = new THREE.Vector3(0, pathStartY, roomDepth / 2 - 1); // Start slightly inside entrance
+                // Calculate target world position (in front of the shelf)
+                const parentShelf = foundBox.parent;
+                const shelfPosition = parentShelf.position;
+                const shelfRotationY = parentShelf.rotation.y;
+                // Target point in front of the shelf center, considering rotation
+                const targetOffsetZ = shelfDepth / 2 + 0.5; // Distance in front
+                const targetWorld = new THREE.Vector3(0, pathStartY, targetOffsetZ);
+                targetWorld.applyEuler(parentShelf.rotation); // Apply shelf rotation
+                targetWorld.add(shelfPosition); // Add shelf position
+                // Convert world coordinates to grid coordinates
+                const startGrid = worldToGrid(startWorld.x, startWorld.z);
+                const endGrid = worldToGrid(targetWorld.x, targetWorld.z);
+                 // Ensure endGrid is walkable, if not, find nearest walkable neighbor (simple approach)
+                if (navigationGrid[endGrid.z][endGrid.x] === 1) {
+                    console.warn("Target grid cell is blocked, finding nearest walkable...");
+                    const directions = [[0, 1], [0, -1], [1, 0], [-1, 0], [1, 1], [1, -1], [-1, 1], [-1, -1]];
+                    let foundWalkable = false;
+                    for (const dir of directions) {
+                        const checkX = endGrid.x + dir[0];
+                        const checkZ = endGrid.z + dir[1];
+                        if (checkX >= 0 && checkX < gridWidth && checkZ >= 0 && checkZ < gridHeight && navigationGrid[checkZ][checkX] === 0) {
+                            endGrid.x = checkX;
+                            endGrid.z = checkZ;
+                            foundWalkable = true;
+                            break;
+                        }
+                    }
+                    if (!foundWalkable) {
+                         showMessage(`Tidak dapat menemukan titik tujuan yang bisa dijangkau dekat rak ${locationId}.`, true);
+                         return; // Stop if no walkable target found nearby
+                    }
+                }
+                console.log(`Pathfinding from grid [${startGrid.x}, ${startGrid.z}] to [${endGrid.x}, ${endGrid.z}]`);
+                const gridPath = findPathAStar(startGrid.x, startGrid.z, endGrid.x, endGrid.z);
+                if (gridPath) {
+                    // Convert grid path back to world points
+                    const worldPathPoints = gridPath.map(node => gridToWorld(node.x, node.z));
+                    // --- Record Aisle Access Frequency (based on path) ---
+                    const aisleZs = {};
+                    for(let i = 1; i < worldPathPoints.length - 1; i++) {
+                        const zRounded = worldPathPoints[i].z.toFixed(1);
+                        aisleZs[zRounded] = (aisleZs[zRounded] || 0) + 1;
+                    }
+                    let mostFrequentZ = null;
+                    let maxCount = 0;
+                    for (const z in aisleZs) {
+                        if (aisleZs[z] > maxCount) {
+                            maxCount = aisleZs[z];
+                            mostFrequentZ = z;
+                        }
+                    }
+                    if (mostFrequentZ) {
+                        const aisleKey = `Lorong Z=${mostFrequentZ}`;
+                        aisleAccessFrequency[aisleKey] = (aisleAccessFrequency[aisleKey] || 0) + 1;
+                    }
+                    // Draw the path line
+                    const pathGeometry = new THREE.BufferGeometry().setFromPoints(worldPathPoints);
+                    pathLine = new THREE.Line(pathGeometry, pathMaterial);
+                    pathLine.renderOrder = 1;
+                    scene.add(pathLine);
+                    // --- Calculate and Update Average Retrieval Time ---
+                    let pathLength = 0;
+                    for (let i = 0; i < worldPathPoints.length - 1; i++) {
+                        pathLength += worldPathPoints[i].distanceTo(worldPathPoints[i + 1]);
+                    }
+                    const estimatedTime = (pathLength / walkingSpeed) + fixedPickTime;
+                    retrievalTimes.push(estimatedTime);
+                    if (retrievalTimes.length > maxRetrievalTimes) {
+                        retrievalTimes.shift();
+                    }
+                    const sum = retrievalTimes.reduce((a, b) => a + b, 0);
+                    const avgTime = sum / retrievalTimes.length;
+                    avgRetrievalTimeElement.textContent = avgTime.toFixed(1);
+                } else {
+                    // Fallback to simple line if A* fails
+                    console.error("A* pathfinding failed, drawing simple line as fallback.");
+                    const simplePathPoints = [startWorld, targetWorld];
+                    const pathGeometry = new THREE.BufferGeometry().setFromPoints(simplePathPoints);
+                    pathLine = new THREE.Line(pathGeometry, pathMaterial);
+                    pathLine.renderOrder = 1;
+                    scene.add(pathLine);
+                    avgRetrievalTimeElement.textContent = "N/A"; // Indicate failure
+                }
+                // --- Camera Focus (Orbit Mode) ---
+                if (isOrbitView) {
+                    const midPoint = new THREE.Vector3().lerpVectors(startWorld, targetWorld, 0.5); // Midpoint of path start/end
+                    orbitControls.target.copy(midPoint);
+                    const targetPosition = endPoint.clone().add(new THREE.Vector3(3, 3, 3)); // Look from near the box
+                    const duration = 0.8;
+                    const startTime = clock.getElapsedTime();
+                    const startPosition = camera.position.clone();
+                    function moveCamera() {
+                        const elapsed = clock.getElapsedTime() - startTime;
+                        const t = Math.min(elapsed / duration, 1);
+                        camera.position.lerpVectors(startPosition, targetPosition, t * (2 - t));
+                        orbitControls.update();
+                        if (t < 1) requestAnimationFrame(moveCamera);
+                    }
+                    requestAnimationFrame(moveCamera);
+                }
+                // --- Display Message ---
+                let messageText = archiveInfo?.nama_arsip
+                    ? `Arsip "${archiveInfo.nama_arsip}" (ID: ${archiveInfo.id}) ditemukan di ${foundBox.userData.id}.`
+                    : `Boks ${foundBox.userData.id} ditemukan.`;
+                if (archiveInfo?.deskripsi) {
+                     messageText += ` (${archiveInfo.deskripsi})`;
+                 }
+                showMessage(messageText);
+            } else {
+                // Handle case where the clicked location ID doesn't match any box
+                showMessage(`Lokasi boks "${locationId}" tidak ditemukan di scene.`, true);
+                 const listItem = archiveListElement.querySelector(`li[data-location="${locationId}"]`);
+                 if (listItem) {
+                     listItem.classList.remove('selected');
+                 }
+            }
+        }
+        // Event listener for the archive list
+        archiveListElement.addEventListener('click', (event) => {
+            if (event.target && event.target.nodeName === 'LI') {
+                const locationId = event.target.dataset.location;
+                if (locationId) {
+                    findAndShowPath(locationId);
+                }
+            }
+        });
+         // === Analytics Panel Logic ===
+         const topAccessedListElement = document.getElementById('top-accessed-list');
+         const topAislesListElement = document.getElementById('top-aisles-list');
+         const updateAnalyticsBtn = document.getElementById('update-analytics-btn');
+         function updateAnalyticsPanel() {
+             // --- Top Accessed Archives ---
+             topAccessedListElement.innerHTML = ''; // Clear list
+             const sortedAccess = Object.entries(accessFrequency)
+                 .sort(([, a], [, b]) => b - a) // Sort by count descending
+                 .slice(0, 10); // Get top 10
+             if (sortedAccess.length > 0) {
+                 sortedAccess.forEach(([locationId, count]) => {
+                     const archiveItem = archiveData.find(item => item.lokasi_rak === locationId);
+                     const displayName = archiveItem ? archiveItem.nama_arsip.substring(0, 20) + '...' : locationId; // Show name or ID
+                     const li = document.createElement('li');
+                     li.textContent = `${displayName}: `;
+                     const countSpan = document.createElement('span');
+                     countSpan.textContent = count;
+                     li.appendChild(countSpan);
+                     li.title = archiveItem ? `${archiveItem.nama_arsip} (${locationId}) - ${count} kali` : `${locationId} - ${count} kali`;
+                     topAccessedListElement.appendChild(li);
+                 });
+             } else {
+                 topAccessedListElement.innerHTML = '<li>Belum ada data akses.</li>';
+             }
+             // --- Top Used Aisles ---
+             topAislesListElement.innerHTML = ''; // Clear list
+             const sortedAisles = Object.entries(aisleAccessFrequency)
+                 .sort(([, a], [, b]) => b - a) // Sort by count descending
+                 .slice(0, 5); // Get top 5
+             if (sortedAisles.length > 0) {
+                 sortedAisles.forEach(([aisleKey, count]) => {
+                     const li = document.createElement('li');
+                     li.textContent = `${aisleKey}: `;
+                      const countSpan = document.createElement('span');
+                     countSpan.textContent = count;
+                     li.appendChild(countSpan);
+                     li.title = `${aisleKey} - ${count} kali`;
+                     topAislesListElement.appendChild(li);
+                 });
+             } else {
+                 topAislesListElement.innerHTML = '<li>Belum ada data lorong.</li>';
+             }
+         }
+         // Add event listener to the button
+         updateAnalyticsBtn.addEventListener('click', updateAnalyticsPanel);
+        // === Animation Loop ===
+        const clock = new THREE.Clock();
+        const blinkRate = 0.5;
+        let envUpdateInterval = 2; // Update environment info every 2 seconds
+        let timeSinceLastEnvUpdate = 0;
+        let heatmapUpdateInterval = 1; // Update heatmap every 1 second
+        let timeSinceLastHeatmapUpdate = 0;
+        function animate() {
+            requestAnimationFrame(animate);
+            const delta = clock.getDelta();
+            const elapsedTime = clock.getElapsedTime();
+            timeSinceLastEnvUpdate += delta;
+            timeSinceLastHeatmapUpdate += delta;
+            // --- Update Environment Info Periodically ---
+            if (timeSinceLastEnvUpdate >= envUpdateInterval) {
+                updateEnvironmentInfo();
+                timeSinceLastEnvUpdate = 0; // Reset timer
+            }
+             // --- Update Shelf Temperatures & Heatmap Periodically ---
+             if (timeSinceLastHeatmapUpdate >= heatmapUpdateInterval) {
+                updateShelfTemperatures();
+                timeSinceLastHeatmapUpdate = 0; // Reset timer
+            }
+            // --- Blinking Logic ---
+            if (highlightedBox && highlightedBox.userData.isBlinking) {
+                const blinkPhase = (elapsedTime / blinkRate) % 1.0;
+                if (blinkPhase < 0.5) {
+                    highlightedBox.material = blinkMaterial;
+                } else {
+                    if(highlightedBox.userData.originalMaterial) {
+                       highlightedBox.material = highlightedBox.userData.originalMaterial;
+                    } else {
+                       highlightedBox.material = boxMaterial; // Fallback
+                    }
+                }
+            }
+            // --- Control Updates ---
+            if (isOrbitView) {
+                orbitControls.update();
+                // *** Raycasting for Hover Effect (only in Orbit view) ***
+                handleHover();
+            } else if (pointerLockControls.isLocked === true) {
+                // FPV Movement Logic
+                velocity.x -= velocity.x * 10.0 * delta;
+                velocity.z -= velocity.z * 10.0 * delta;
+                direction.z = Number(moveForward) - Number(moveBackward);
+                direction.x = Number(moveRight) - Number(moveLeft);
+                direction.normalize();
+                const currentSpeed = moveSpeed * delta * 10;
+                if (moveForward || moveBackward) velocity.z -= direction.z * currentSpeed;
+                if (moveLeft || moveRight) velocity.x -= direction.x * currentSpeed;
+                 pointerLockControls.moveRight(-velocity.x * delta);
+                 pointerLockControls.moveForward(-velocity.z * delta);
+                 const camPos = pointerLockControls.getObject().position;
+                 const padding = 0.5;
+                 camPos.x = Math.max(-roomWidth / 2 + padding, Math.min(roomWidth / 2 - padding, camPos.x));
+                 camPos.z = Math.max(-roomDepth / 2 + padding, Math.min(roomDepth / 2 - padding, camPos.z));
+                 // *** Keep camera height constant ***
+                 camPos.y = (-roomHeight / 2) + playerEyeHeight;
+            }
+            // --- Rendering ---
+            renderer.render(scene, camera);
+            if (isOrbitView) {
+                labelRenderer.render(scene, camera);
+            }
+        }
+        // === Environment Info Simulation ===
+        const tempValueElement = document.getElementById('temp-value');
+        const humidityValueElement = document.getElementById('humidity-value');
+        const lightValueElement = document.getElementById('light-value');
+        const totalBoxesValueElement = document.getElementById('total-boxes-value');
+        const utilityValueElement = document.getElementById('utility-value');
+        const borrowedValueElement = document.getElementById('borrowed-value');
+        // avgRetrievalTimeElement defined with other pathfinding vars
+        const baseTemp = 21; // Base temperature in °C
+        const tempFluctuation = 1.5; // Max fluctuation +/-
+        const baseHumidity = 55; // Base humidity in %
+        const humidityFluctuation = 5; // Max fluctuation +/-
+        const baseLight = 100; // Base light level in Lux
+        const lightFluctuation = 25; // Max fluctuation +/-
+        let simulatedBorrowedCount = 3; // Initial borrowed count
+        function updateEnvironmentInfo() {
+            // Calculate average temperature from all shelves for display
+            let totalTemp = 0;
+            shelves.forEach(shelf => totalTemp += shelf.userData.temperature);
+            const currentAvgTemp = shelves.length > 0 ? totalTemp / shelves.length : baseTemp;
+            tempValueElement.textContent = currentAvgTemp.toFixed(1);
+            // Simulate humidity
+            const currentHumidity = baseHumidity + (Math.random() * 2 - 1) * humidityFluctuation;
+            humidityValueElement.textContent = Math.round(currentHumidity);
+            // Simulate light
+            const currentLight = baseLight + (Math.random() * 2 - 1) * lightFluctuation;
+            lightValueElement.textContent = Math.round(currentLight);
+            // Simulate borrowed count fluctuation
+            if (Math.random() < 0.1) {
+                simulatedBorrowedCount += (Math.random() < 0.5 ? -1 : 1);
+                simulatedBorrowedCount = Math.max(0, Math.min(simulatedBorrowedCount, occupiedBoxesCount));
+            }
+            borrowedValueElement.textContent = simulatedBorrowedCount;
+        }
+        // Function to update only storage-related info
+        function updateStorageInfo() {
+            totalBoxesValueElement.textContent = totalBoxesCreated;
+            const utilityPercentage = totalBoxesCreated > 0 ? (occupiedBoxesCount / totalBoxesCreated) * 100 : 0;
+            utilityValueElement.textContent = utilityPercentage.toFixed(1);
+            simulatedBorrowedCount = Math.min(simulatedBorrowedCount, occupiedBoxesCount);
+            borrowedValueElement.textContent = simulatedBorrowedCount;
+        }
+        // === Heatmap Logic ===
+        function getTemperatureColor(temp) {
+            if (temp < TEMP_IDEAL_MIN) {
+                // Blue range (colder = more blue)
+                const factor = Math.max(0, (temp - TEMP_COLD) / (TEMP_IDEAL_MIN - TEMP_COLD)); // 0 at TEMP_COLD, 1 at TEMP_IDEAL_MIN
+                return new THREE.Color().lerpColors(colorCold, colorIdeal, factor);
+            } else if (temp > TEMP_IDEAL_MAX) {
+                // Red range (hotter = more red)
+                const factor = Math.min(1, (temp - TEMP_IDEAL_MAX) / (TEMP_HOT - TEMP_IDEAL_MAX)); // 0 at TEMP_IDEAL_MAX, 1 at TEMP_HOT
+                return new THREE.Color().lerpColors(colorIdeal, colorHot, factor);
+            } else {
+                // Ideal range (green)
+                return colorIdeal.clone();
+            }
+        }
+        function updateShelfTemperatures() {
+            shelves.forEach(shelfGroup => {
+                // Simulate temperature fluctuation based on whether it's anomalous
+                if (shelfGroup.userData.isAnomalous) {
+                    // Keep temperature around its anomaly zone with small fluctuations
+                    const anomalyBase = (shelfGroup.userData.creationIndex === 5) ? TEMP_HOT : TEMP_COLD;
+                    shelfGroup.userData.temperature = anomalyBase + (Math.random() * 2 - 1); // Smaller fluctuation around anomaly
+                } else {
+                    // Normal fluctuation around base temperature
+                    shelfGroup.userData.temperature += (Math.random() * 0.4 - 0.2); // Smaller fluctuation
+                }
+                // Clamp temperature within reasonable bounds (e.g., 10 to 35)
+                shelfGroup.userData.temperature = Math.max(10, Math.min(35, shelfGroup.userData.temperature));
+                const tempColor = getTemperatureColor(shelfGroup.userData.temperature);
+                // Apply color to panels (only if not currently highlighted/blinking)
+                // Note: Blinking logic in animate() will override this temporarily
+                if (!highlightedBox || highlightedBox.parent !== shelfGroup) {
+                     shelfGroup.userData.panels.forEach(panel => {
+                        panel.material.color.copy(tempColor);
+                     });
+                }
+            });
+        }
+        // === Hover Effect Logic ===
+        function handleHover() {
+            raycaster.setFromCamera(mouse, camera);
+            // Intersect with the specific array of shelf panels
+            const intersects = raycaster.intersectObjects(shelfPanels);
+            if (intersects.length > 0) {
+                const intersectedPanel = intersects[0].object;
+                // Traverse up to find the parent shelfGroup
+                let parentShelf = intersectedPanel.parent;
+                while (parentShelf && !(parentShelf instanceof THREE.Group && parentShelf.userData.panels)) {
+                    parentShelf = parentShelf.parent;
+                }
+                if (parentShelf && parentShelf !== hoveredShelf) {
+                    hoveredShelf = parentShelf;
+                    const temp = hoveredShelf.userData.temperature;
+                    tempTooltipElement.textContent = `Suhu Rak: ${temp.toFixed(1)} °C`;
+                    tempTooltipElement.style.display = 'block';
+                    // Position tooltip near mouse - adjust offsets as needed
+                    tempTooltipElement.style.left = `${mouse.clientX + 15}px`;
+                    tempTooltipElement.style.top = `${mouse.clientY - 10}px`;
+                } else if (parentShelf === hoveredShelf) {
+                     // Update position if still hovering the same shelf
+                     tempTooltipElement.style.left = `${mouse.clientX + 15}px`;
+                     tempTooltipElement.style.top = `${mouse.clientY - 10}px`;
+                }
+            } else {
+                // No intersection
+                if (hoveredShelf) {
+                    hoveredShelf = null;
+                    tempTooltipElement.style.display = 'none';
+                }
+            }
+        }
+        // === Event Listeners ===
+        // Mouse move listener for hover effect
+        window.addEventListener('mousemove', (event) => {
+            // calculate mouse position in normalized device coordinates
+            // (-1 to +1) for both components
+            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
+            // Store clientX/Y for tooltip positioning
+            mouse.clientX = event.clientX;
+            mouse.clientY = event.clientY;
+        }, false);
+        // === Handle Window Resize ===
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            labelRenderer.setSize(window.innerWidth, window.innerHeight);
+        }, false);
+        // === Initial Setup ===
+        window.onload = () => {
+            // Assign the processed data (limited to 30) to the global archiveData
+            archiveData = defaultDummyData;
+            createSceneContent(); // Creates scene, builds grid, links data, populates list, updates storage info
+            updateEnvironmentInfo(); // Initial environment display (temp, humidity, light, borrowed)
+            updateShelfTemperatures(); // Initial heatmap coloring
+            // Initialize average retrieval time display
+            avgRetrievalTimeElement.textContent = "N/A";
+            updateAnalyticsPanel(); // Initial display for analytics panel
+            animate();
+        }
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -119,20 +119,28 @@
             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
             gap: 1.5rem;
         }
         .link-card {
             background: rgba(13, 2, 33, 0.7);
             border: 1px solid var(--neon-purple);
             border-radius: 10px;
             padding: 1.5rem;
-            transition: all 0.3s ease;
             position: relative;
             overflow: hidden;
             backdrop-filter: blur(5px);
         }
-        .link-card:hover {
-            transform: translateY(-5px) rotate(1deg);
-            box-shadow: 0 5px 15px var(--neon-purple);
-            border-color: var(--cosmic-blue);
         }
         .link-card::before {
             content: '';
@@ -145,8 +153,8 @@
             opacity: 0;
             transition: opacity 0.5s ease;
         }
-        .link-card:hover::before {
-            opacity: 0.1;
         }
         .link-title {
             font-size: 1.2rem;
@@ -164,20 +172,6 @@
             color: rgba(248, 248, 255, 0.7);
             margin-bottom: 1rem;
         }
-        .link-url {
-            display: inline-block;
-            padding: 0.3rem 0.8rem;
-            background: linear-gradient(90deg, var(--neon-purple), var(--cosmic-blue));
-            color: white;
-            text-decoration: none;
-            border-radius: 20px;
-            font-size: 0.8rem;
-            transition: all 0.3s ease;
-        }
-        .link-url:hover {
-            transform: scale(1.05);
-            box-shadow: 0 0 10px var(--neon-purple);
-        }
         footer {
             text-align: center;
             margin-top: 3rem;
@@ -260,51 +254,68 @@
         </header>
         <div class="links-container">
-            <div class="link-card">
-                <h3 class="link-title"><i class="fas fa-atom link-icon"></i> Physics Simulation</h3>
-                <p class="link-description">Watch particles interact in a simulated environment.</p>
-                <a href="#" class="link-url">Run Simulation</a>
-            </div>
-            <div class="link-card">
-                <h3 class="link-title"><i class="fas fa-chart-line link-icon"></i> Economic Model</h3>
-                <p class="link-description">Simulate market trends and economic principles.</p>
-                <a href="#" class="link-url">View Model</a>
-            </div>
-            <div class="link-card">
-                <h3 class="link-title"><i class="fas fa-users link-icon"></i> Crowd Simulation</h3>
-                <p class="link-description">Observe simulated crowd behavior in different scenarios.</p>
-                <a href="#" class="link-url">Start Simulation</a>
-            </div>
-            <div class="link-card">
-                <h3 class="link-title"><i class="fas fa-leaf link-icon"></i> Ecosystem Simulation</h3>
-                <p class="link-description">A model demonstrating predator-prey dynamics.</p>
-                <a href="#" class="link-url">Explore Ecosystem</a>
-            </div>
-            <div class="link-card">
-                <h3 class="link-title"><i class="fas fa-network-wired link-icon"></i> Network Traffic</h3>
-                <p class="link-description">Simulate data flow and congestion in networks.</p>
-                <a href="#" class="link-url">Analyze Traffic</a>
-            </div>
-            <div class="link-card">
-                <h3 class="link-title"><i class="fas fa-car link-icon"></i> Traffic Simulation</h3>
-                <p class="link-description">Model vehicle movement and traffic light systems.</p>
-                <a href="#" class="link-url">Observe Traffic</a>
-            </div>
-            <div class="link-card">
-                <h3 class="link-title"><i class="fas fa-brain link-icon"></i> Simulasi Arsitektur U-Net</h3>
-                <p class="link-description">Visualisasi arsitektur U-Net yang umum digunakan untuk segmentasi gambar biomedis.</p>
-                <a href="unet.html" class="link-url">Lihat Simulasi</a>
-            </div>
         </div>
         <footer>
-            <p>🌀 Created by jatnikonm · 2025 · Simulation Examples ⚙️</p>
         </footer>
     </div>

             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
             gap: 1.5rem;
         }
+        .card-link {
+            text-decoration: none; /* Remove underline from link */
+            color: inherit; /* Inherit text color */
+            display: block; /* Make the link a block element */
+            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transitions here */
+        }
+        .card-link:hover {
+             transform: translateY(-5px) rotate(1deg); /* Move hover effect here */
+             box-shadow: 0 5px 15px var(--neon-purple); /* Move hover effect here */
+        }
         .link-card {
             background: rgba(13, 2, 33, 0.7);
             border: 1px solid var(--neon-purple);
             border-radius: 10px;
             padding: 1.5rem;
             position: relative;
             overflow: hidden;
             backdrop-filter: blur(5px);
+            height: 100%; /* Ensure cards fill the link height */
         }
+        .card-link:hover .link-card { /* Apply border color change on link hover */
+             border-color: var(--cosmic-blue);
         }
         .link-card::before {
             content: '';
             opacity: 0;
             transition: opacity 0.5s ease;
         }
+        .card-link:hover .link-card::before {
+             opacity: 0.1;
         }
         .link-title {
             font-size: 1.2rem;
             color: rgba(248, 248, 255, 0.7);
             margin-bottom: 1rem;
         }
         footer {
             text-align: center;
             margin-top: 3rem;
         </header>
         <div class="links-container">
+            <!-- Wrap each card in an anchor tag -->
+            <a href="dt_preservasi.html" class="card-link"> <!-- Updated href -->
+                <div class="link-card">
+                    <h3 class="link-title"><i class="fas fa-archive link-icon"></i> Digital Twin Preservasi Arsip</h3> <!-- Updated icon and title -->
+                    <p class="link-description">Simulasi digital twin untuk manajemen dan preservasi arsip statis.</p> <!-- Updated description -->
+                    <!-- Removed inner link -->
+                </div>
+            </a>
+            <a href="#" class="card-link">
+                <div class="link-card">
+                    <h3 class="link-title"><i class="fas fa-chart-line link-icon"></i> Economic Model</h3>
+                    <p class="link-description">Simulate market trends and economic principles.</p>
+                    <!-- Removed inner link -->
+                </div>
+            </a>
+            <a href="blockchain.html" class="card-link"> <!-- Updated href -->
+                <div class="link-card">
+                    <h3 class="link-title"><i class="fas fa-cubes link-icon"></i> Blockchain Simulation</h3> <!-- Updated icon and title -->
+                    <p class="link-description">Visualisasi alur penyimpanan arsip menggunakan IPFS dan Blockchain.</p> <!-- Updated description -->
+                    <!-- Removed inner link -->
+                </div>
+            </a>
+            <a href="#" class="card-link">
+                <div class="link-card">
+                    <h3 class="link-title"><i class="fas fa-leaf link-icon"></i> Ecosystem Simulation</h3>
+                    <p class="link-description">A model demonstrating predator-prey dynamics.</p>
+                    <!-- Removed inner link -->
+                </div>
+            </a>
+            <a href="#" class="card-link">
+                <div class="link-card">
+                    <h3 class="link-title"><i class="fas fa-network-wired link-icon"></i> Network Traffic</h3>
+                    <p class="link-description">Simulate data flow and congestion in networks.</p>
+                    <!-- Removed inner link -->
+                </div>
+            </a>
+            <a href="#" class="card-link">
+                <div class="link-card">
+                    <h3 class="link-title"><i class="fas fa-car link-icon"></i> Traffic Simulation</h3>
+                    <p class="link-description">Model vehicle movement and traffic light systems.</p>
+                    <!-- Removed inner link -->
+                </div>
+            </a>
+            <a href="unet.html" class="card-link">
+                <div class="link-card">
+                    <h3 class="link-title"><i class="fas fa-brain link-icon"></i> Simulasi Arsitektur U-Net</h3>
+                    <p class="link-description">Visualisasi arsitektur U-Net yang umum digunakan untuk segmentasi gambar biomedis.</p>
+                    <!-- Removed inner link -->
+                </div>
+            </a>
         </div>
         <footer>
+            <p>🌀 Created by jatnikonm · 2024 · Simulation Examples ⚙️</p>
         </footer>
     </div>

unet.html CHANGED Viewed

@@ -261,6 +261,17 @@
             font-size: 1rem; /* text-base */
             color: #cbd5e0; /* gray-400 */
         }
     </style>
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -277,6 +288,7 @@
             <p><strong>Dimensi Data:</strong> <span id="data-dimensions">-</span></p>
             <p class="mt-2 text-xs">Gunakan mouse untuk memutar (klik kiri), zoom (scroll), dan pan (klik kanan).</p>
             <p class="mt-1 text-xs">Klik pada blok untuk info detail.</p>
         </div>
         <div id="controls">

             font-size: 1rem; /* text-base */
             color: #cbd5e0; /* gray-400 */
         }
+        #back-link {
+            display: block;
+            margin-top: 0.75rem; /* Add some space above */
+            color: #63b3ed; /* blue-400 */
+            text-decoration: none;
+            font-size: 0.8rem;
+        }
+        #back-link:hover {
+            color: #90cdf4; /* blue-300 */
+            text-decoration: underline;
+        }
     </style>
     <link rel="preconnect" href="https://fonts.googleapis.com">
             <p><strong>Dimensi Data:</strong> <span id="data-dimensions">-</span></p>
             <p class="mt-2 text-xs">Gunakan mouse untuk memutar (klik kiri), zoom (scroll), dan pan (klik kanan).</p>
             <p class="mt-1 text-xs">Klik pada blok untuk info detail.</p>
+            <a href="index.html" id="back-link">← Kembali ke Showcase</a> <!-- Added Back Link -->
         </div>
         <div id="controls">