High Density Engineering<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@700;900&family=JetBrains+Mono:wght@400;600&display=swap\" rel=\"stylesheet\">\n <style>\n \/* WORDPRESS OVERRIDE - FORCE FULL WIDTH *\/\n body, html {\n margin: 0 !important;\n padding: 0 !important;\n max-width: 100% !important;\n width: 100% !important;\n box-sizing: border-box !important;\n }\n\n #page, #content, .site, .site-content, \n .entry-content, .page, article, main, \n div[class*=\"container\"], div[class*=\"wrapper\"], .hfeed {\n margin: 0 !important;\n padding: 0.2vh 0 !important;\n max-width: 100% !important;\n width: 100% !important;\n box-sizing: border-box !important;\n }\n \n \/* Force header full width *\/\n .header, header, [class*=\"header\"] {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n }\n \n @font-face {\n font-family: AlienHieroglyph;\n src: url('\/HDE\/public\/font\/AlienHieroglyph-Regular.ttf') format('truetype');\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n --bg-primary: #000000;\n --accent-cyan: #00eeff;\n --accent-magenta: #0011ff;\n --text-primary: #ffffff;\n --text-secondary: #888888;\n }\n\n body {\n min-height: 100vh;\n position: relative;\n font-family: 'JetBrains Mono', monospace;\n background:\n \/* Crystal glow *\/\n radial-gradient(circle at 15% 15%,\n rgba(160,255,255,.35),\n transparent 28%),\n\n radial-gradient(circle at 80% 20%,\n rgba(110,180,255,.30),\n transparent 30%),\n\n radial-gradient(circle at 50% 85%,\n rgba(90,230,255,.20),\n transparent 35%),\n\n \/* Giant crystal faces *\/\n linear-gradient(120deg,\n transparent 0%,\n rgba(255,255,255,.08) 18%,\n transparent 22%),\n\n linear-gradient(60deg,\n transparent 0%,\n rgba(180,255,255,.10) 30%,\n transparent 35%),\n\n linear-gradient(-55deg,\n transparent 0%,\n rgba(255,255,255,.12) 40%,\n transparent 45%),\n\n linear-gradient(-120deg,\n transparent 0%,\n rgba(120,240,255,.08) 70%,\n transparent 74%),\n\n linear-gradient(\n 180deg,\n #3b7fff 0%,\n #3442ff 22%,\n #2e77cf 55%,\n #13264f 80%,\n #050812 100%\n );\n\n background-attachment:fixed;\n color: var(--text-primary);\n overflow-x: hidden;\n }\n\n \/* Noise *\/\n\n body > * {\n position: relative;\n z-index: 1;\n }\n\n body::after{\n content:\"\";\n position:fixed;\n inset:0;\n pointer-events:none;\n\n background:\n radial-gradient(circle, rgba(255,255,255,.35) 0%, transparent 55%) 15% 20%\/220px 220px,\n radial-gradient(circle, rgba(120,255,255,.25) 0%, transparent 55%) 70% 35%\/300px 300px,\n radial-gradient(circle, rgba(255,255,255,.30) 0%, transparent 55%) 80% 80%\/180px 180px,\n radial-gradient(circle, rgba(180,220,255,.20) 0%, transparent 55%) 25% 75%\/260px 260px;\n\n filter:blur(25px);\n animation:floatCrystals 12s ease-in-out infinite alternate;\n}\n\n@keyframes floatCrystals{\n\n from{\n transform:translateY(-15px);\n }\n\n to{\n transform:translateY(20px);\n }\n\n}\n\n \/* Chrome, Edge, Safari *\/\n ::-webkit-scrollbar {\n width: 12px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: rgba(0, 255, 100, 0.08);\n backdrop-filter: blur(4px);\n border: 1px solid #00ff66;\n border-radius: 12px;\n box-shadow:\n inset 0 0 6px rgba(0,255,100,0.5),\n 0 0 8px #00ff66;\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 255, 120, 0.3);\n box-shadow:\n 0 0 10px #00ff66,\n 0 0 18px #00ff66;\n }\n\n \/* Firefox *\/\n * {\n scrollbar-width: thin;\n scrollbar-color: #00ff66 transparent;\n }\n\n \/* ACTUAL VISIBLE animation *\/\n @keyframes slowDrift {\n 0% { transform: translate(0, 0); }\n 50% { transform: translate(-3%, -3%); }\n 100% { transform: translate(0, 0); }\n }\n\n \/* 3D Model Container *\/\n #model-container {\n width: 100%;\n height: 500px;\n margin: 30px 0;\n padding: 10px 0 10px 0;\n position: relative;\n background-color: transparent; \/* Dark background so we can see it *\/\n }\n \n #model-container canvas {\n display: block;\n width: 100% !important;\n height: 100% !important;\n }\n \n .loading-indicator {\n position: relative;\n color: var(--accent-cyan);\n font-size: 1.2rem;\n text-align: center;\n z-index: 10;\n }\n \n .loading-spinner {\n width: 50px;\n height: 50px;\n border: 4px solid rgba(177, 255, 154, 0.2);\n border-top: 4px solid var(--accent-cyan);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 10% auto 10%;\n }\n\n \/* Header *\/\n .header {\n font-family: 'AlienHieroglyph';\n text-align: center;\n padding: 30px 20px 0px 20px;\n position: sticky;\n top: 0;\n background: rgba(0, 0, 0, 0.95);\n z-index: 100;\n backdrop-filter: blur(10px);\n }\n\n .header h1 {\n font-size: 2.5rem;\n margin-bottom: 10px;\n color: #00a2ff;\n background: linear-gradient(90deg, #00a2ff11, #b1ff9a11);\n filter: drop-shadow(0 0 10px #00a2ff);\n }\n\n .header p {\n font-size: 1rem;\n color: #ff00ea;\n }\n\n .filter-btn, .ufo-btn, .support-btn {\n padding: 8px 5px;\n background: transparent;\n border: 2px solid var(--accent-cyan);\n color: var(--accent-cyan);\n font-family: 'Orbitron', sans-serif;\n font-size: 0.7rem;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n position: relative;\n overflow: hidden;\n }\n\n .filter-btn::before, .ufo-btn::before, .support-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: var(--accent-cyan);\n transition: left 0.3s ease;\n z-index: -1;\n }\n\n .filter-btn:hover::before,\n .filter-btn.active::before,\n .ufo-btn:hover::before,\n .ufo-btn.active::before,\n .support-btn:hover::before,\n .support-btn.active::before {\n left: 0;\n }\n\n .filter-btn:hover,\n .filter-btn.active,\n .ufo-btn:hover,\n .ufo-btn.active,\n .support-btn:hover,\n .support-btn.active {\n color: #000;\n }\n\n \/* Grid Container *\/\n .grid-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n border: 4px solid rgba(255, 255, 255, 0.2);\n }\n\n \/* Project Card *\/\n .project-card {\n position: relative;\n background: rgba(0, 0, 0, 0.8);\n border: 2px solid rgba(0, 162, 255, 0.3);\n cursor: pointer;\n transition: all 0.3s ease;\n overflow: hidden;\n aspect-ratio: 1;\n display: flex;\n flex-direction: column;\n }\n\n .project-card:hover {\n transform: translateY(-5px);\n border-color: var(--accent-cyan);\n box-shadow: 0 10px 40px rgba(177, 255, 154, 0.4);\n }\n\n .project-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 3px;\n background: linear-gradient(90deg, var(--accent-cyan), var(--accent-magenta));\n transform: scaleX(0);\n transition: transform 0.3s ease;\n }\n\n .project-card:hover::before {\n transform: scaleX(1);\n }\n\n .card-image {\n width: 100%;\n height: 70%;\n object-fit: cover;\n display: block;\n }\n\n .card-content {\n padding: 15px;\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .card-title {\n font-family: 'Orbitron', sans-serif;\n font-size: 1.1rem;\n margin-bottom: 5px;\n color: var(--accent-cyan);\n text-align: center;\n }\n\n .card-category {\n font-size: 0.75rem;\n color: var(--text-secondary);\n text-align: center;\n text-transform: uppercase;\n }\n\n \/* Modal Overlay *\/\n .modal-overlay {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.95);\n z-index: 1000;\n overflow-y: auto;\n animation: fadeIn 0.3s ease;\n }\n\n .modal-overlay.active {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .modal-content {\n background: rgba(0, 0, 0, 0.95);\n border: 3px solid var(--accent-cyan);\n max-width: 900px;\n width: 100%;\n padding: 40px;\n position: relative;\n animation: slideUp 0.3s ease;\n }\n\n @keyframes slideUp {\n from { \n opacity: 0;\n transform: translateY(50px);\n }\n to { \n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .modal-close {\n position: absolute;\n top: 0;\n right: 0;\n background: transparent;\n border: 2px solid var(--accent-magenta);\n color: var(--accent-magenta);\n width: 40px;\n height: 40px;\n font-size: 24px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .modal-close:hover {\n background: var(--accent-magenta);\n color: #000;\n transform: rotate(90deg);\n }\n\n .modal-image {\n width: 100%;\n max-height: 250px;\n object-fit: contain;\n margin-bottom: 30px;\n border: 2px solid var(--accent-magenta);\n }\n\n .modal-title {\n font-family: 'Orbitron', sans-serif;\n font-size: 2rem;\n margin-bottom: 15px;\n color: var(--accent-cyan);\n }\n\n .modal-description {\n color: var(--text-secondary);\n line-height: 1.8;\n margin-bottom: 30px;\n font-size: 1.1rem;\n }\n\n .modal-price {\n color: #33ff00;\n font-size: 1.8rem;\n margin-bottom: 20px;\n font-weight: bold;\n }\n\n .modal-button {\n display: inline-block;\n padding: 15px 40px;\n background: transparent;\n border: 2px solid var(--accent-magenta);\n color: var(--accent-magenta);\n text-decoration: none;\n font-weight: 600;\n font-size: 1.1rem;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .modal-button::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: var(--accent-magenta);\n transition: left 0.3s ease;\n z-index: -1;\n }\n\n .modal-button:hover::before {\n left: 0;\n }\n\n .modal-button:hover {\n color: #33ff00;\n }\n\n \/* Hidden class for filtering *\/\n .hidden {\n display: none;\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .grid-container {\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 15px;\n padding: 20px 10px;\n }\n\n .header h1 {\n font-size: 1.8rem;\n }\n\n .filter-btn, .ufo-btn {\n padding: 10px 15px;\n font-size: 0.8rem;\n }\n\n .modal-content {\n padding: 25px;\n }\n\n .modal-title {\n font-size: 1.5rem;\n }\n }\n .deck {\n display: block;\n width: 50%;\n margin: 0 auto;\n }\n .logo {\n width: 75%;\n height: auto;\n max-width: 450px;\n mix-blend-mode: normal;\n filter: saturate(150%) contrast(1.1);\n display: block;\n margin: 0 auto;\n }\n \/* Filter Tabs *\/\n .filter-container {\n display: flex;\n justify-content: center;\n gap: 8px;\n background: rgba(78, 78, 78, 0.3) !important;\n position: sticky;\n top: 110px;\n left: 0;\n z-index: 99;\n width: 100%;\n backdrop-filter: blur(10px) !important;\n flex-wrap: wrap;\n }\n <\/style>\n <meta name=\"monetag\" content=\"d844fb3de1e0fb2f614d0ba9365c1c89\">\n<\/head>\n<body>\n <video class=\"logo\" src=\"\/HDE\/public\/vid\/logo5.mp4\" autoplay muted loop><\/video>\n <div class=\"header\">\n <h1>HDE<\/h1>\n <div class=\"filter-container\">\n <button class=\"filter-btn active\" data-filter=\"all\">All<\/button>\n <button class=\"filter-btn\" data-filter=\"games\">Games<\/button>\n <button class=\"filter-btn\" data-filter=\"vr\">VR<\/button>\n <button class=\"filter-btn\" data-filter=\"web\">Web Apps<\/button>\n <button class=\"filter-btn\" data-filter=\"apps\">Apps<\/button>\n <\/div>\n <\/div>\n\n <div class=\"grid-container\" id=\"projectGrid\">\n \n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"modal\">\n <div class=\"modal-content\">\n <button class=\"modal-close\" onclick=\"closeModal()\">\u00d7<\/button>\n <img decoding=\"async\" class=\"modal-image\" id=\"modalImage\" src=\"\" alt=\"\">\n <h2 class=\"modal-title\" id=\"modalTitle\"><\/h2>\n <p class=\"modal-description\" id=\"modalDescription\"><\/p>\n <p class=\"modal-price\" id=\"modalPrice\"><\/p>\n <a class=\"modal-button\" id=\"modalButton\" href=\"\" target=\"_blank\"><\/a>\n <\/div>\n <\/div>\n \n \n <div id=\"model-container\">\n <div class=\"loading-indicator\">\n <div class=\"loading-spinner\"><\/div>\n <div>Loading 3D Model…<\/div>\n <\/div>\n <\/div>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n <script>\n \/\/ Wait for DOM to be ready\n document.addEventListener('DOMContentLoaded', function() {\n console.log('DOM loaded, starting 3D viewer setup...');\n \n const container = document.getElementById('model-container');\n console.log('Container found:', container);\n console.log('Container dimensions:', container.clientWidth, 'x', container.clientHeight);\n \n if (!container) {\n console.error('ERROR: model-container not found!');\n return;\n }\n \n if (container.clientWidth === 0 || container.clientHeight === 0) {\n console.error('ERROR: Container has no size!');\n return;\n }\n \n \/\/ Scene Setup\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n console.log('Scene created');\n \n const camera = new THREE.PerspectiveCamera(\n 75, \n container.clientWidth \/ container.clientHeight, \n 1, \n 1000\n );\n console.log('Camera created');\n \n const renderer = new THREE.WebGLRenderer({ \n antialias: true,\n alpha: true,\n powerPreference: 'high-performance'\n });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio); \/\/ Use device pixel ratio for sharper rendering\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n container.appendChild(renderer.domElement);\n console.log('Renderer created with high quality settings');\n console.log('Canvas element:', renderer.domElement);\n\n \/\/ Lighting - Multiple lights from different angles\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\n scene.add(ambientLight);\n console.log('Ambient light added');\n \n \/\/ Front light (from camera direction)\n const frontLight = new THREE.DirectionalLight(0xffffff, 0.8);\n frontLight.position.set(0, 0, 10);\n scene.add(frontLight);\n \n \/\/ Top light\n const topLight = new THREE.DirectionalLight(0xffffff, 0.6);\n topLight.position.set(0, 10, 0);\n scene.add(topLight);\n \n \/\/ Back light (rim lighting)\n const backLight = new THREE.DirectionalLight(0x00fff2, 0.4);\n backLight.position.set(0, 0, -10);\n scene.add(backLight);\n \n \/\/ Side lights\n const leftLight = new THREE.DirectionalLight(0xb1ff9a, 0.3);\n leftLight.position.set(-10, 0, 0);\n scene.add(leftLight);\n \n const rightLight = new THREE.DirectionalLight(0xb1ff9a, 0.3);\n rightLight.position.set(-10, 0, 0);\n scene.add(rightLight);\n \n console.log('All lights added');\n\n \/\/ Loading the GLB File (textures baked in)\n const loader = new THREE.GLTFLoader();\n \n \/\/ Get loading indicator\n const loadingIndicator = container.querySelector('.loading-indicator');\n \n console.log('Starting to load GLB...');\n \n loader.load(\n '\/HDE\/public\/img\/Meshy_AI_Dead_Rats_0418185502_texture.glb',\n function(gltf) {\n console.log('GLB loaded successfully!', gltf);\n \n const object = gltf.scene;\n \n \/\/ Hide loading indicator and show canvas\n if (loadingIndicator) {\n loadingIndicator.style.display = 'none';\n }\n renderer.domElement.style.display = 'block';\n \n \/\/ GLB already has materials and textures baked in, just enhance them\n object.traverse(function(child) {\n if (child instanceof THREE.Mesh) {\n \/\/ Enhance existing materials for better rendering\n if (child.material) {\n child.material.metalness = 0.3; \/\/ Less shiny\n child.material.roughness = 0.8; \/\/ More matte\n }\n child.castShadow = true;\n child.receiveShadow = true;\n }\n });\n \n \/\/ Scale the model 8x larger (doubled from 4x)\n object.scale.set(8, 8, 8);\n \n \/\/ NOW calculate bounding box and center (after scaling)\n const box = new THREE.Box3().setFromObject(object);\n const center = new THREE.Vector3();\n const size = new THREE.Vector3();\n box.getCenter(center);\n box.getSize(size);\n \n \/\/ Center the object at origin for proper rotation\n object.position.sub(center);\n\n \/\/ Position camera to center the model in view\n const maxDim = Math.max(size.x, size.y, size.z);\n const fov = camera.fov * (Math.PI \/ 180);\n let cameraZ = Math.abs(maxDim \/ 2 \/ Math.tan(fov \/ 2));\n cameraZ *= 1.25; \/\/ Reduced multiplier so larger model appears bigger\n \n camera.position.set(0, 0, cameraZ);\n camera.lookAt(0, 0, 0);\n camera.updateProjectionMatrix();\n \n console.log('Camera positioned at z:', cameraZ);\n\n scene.add(object);\n \n \/\/ Mouse interaction variables\n let isDragging = false;\n let previousMousePosition = { x: 0, y: 0 };\n \n \/\/ Mouse down\n container.addEventListener('mousedown', function(e) {\n isDragging = true;\n previousMousePosition = {\n x: e.clientX,\n y: e.clientY\n };\n });\n \n \/\/ Mouse move\n container.addEventListener('mousemove', function(e) {\n if (isDragging) {\n const deltaX = e.clientX - previousMousePosition.x;\n const deltaY = e.clientY - previousMousePosition.y;\n \n object.rotation.y += deltaX * 0.01;\n object.rotation.x += deltaY * 0.01;\n \n previousMousePosition = {\n x: e.clientX,\n y: e.clientY\n };\n }\n });\n \n \/\/ Mouse up\n container.addEventListener('mouseup', function() {\n isDragging = false;\n });\n \n \/\/ Mouse leave\n container.addEventListener('mouseleave', function() {\n isDragging = false;\n });\n \n \/\/ \/\/ Mouse wheel zoom\n \/\/ container.addEventListener('wheel', function(e) {\n \/\/ e.preventDefault();\n \/\/ const zoomSpeed = 0.1;\n \/\/ camera.position.z += e.deltaY * zoomSpeed;\n \/\/ \/\/ Limit zoom distance\n \/\/ camera.position.z = Math.max(2, Math.min(50, camera.position.z));\n \/\/ });\n \n console.log('Mouse controls enabled: drag to rotate, scroll to zoom');\n \n \/\/ Auto-rotate when not dragging\n function animate() {\n requestAnimationFrame(animate);\n \n \/\/ Removed auto-rotation - only manual drag now\n \n renderer.render(scene, camera);\n }\n animate();\n },\n function(xhr) {\n console.log('GLB loading progress: ' + (xhr.loaded \/ xhr.total * 100) + '% loaded');\n },\n function(error) {\n console.error('Error loading GLB file:', error);\n console.log('Check that the file path is correct: \/HDE\/public\/img\/Meshy_AI_Dead_Rats_0418185502_texture.glb');\n }\n );\n\n \/\/ Handle window resizing\n window.addEventListener('resize', function() {\n camera.aspect = container.clientWidth \/ container.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.clientWidth, container.clientHeight);\n });\n });\n <\/script>\n <script>\n \/\/ Project database\n const projects = [\n \/\/ Web Apps\n {\n title: \"Crystalline Player\",\n description: \"A web based music and video player visualized in a beautiful and relaxing 3d crystal dimension. Created by HDE and kkoonnss. Free to use and ad free!\",\n image: \"\/HDE\/public\/img\/crystallineplayer.png\",\n link: \"https:\/\/crystallineplayer.vercel.app\",\n category: \"web\"\n }, \n {\n title: \"Radial Dreams\",\n description: \"Trip your audio and video out with realtime effects processing. Import video or use your camera.\",\n image: \"\/HDE\/public\/img\/rd.png\",\n link: \"https:\/\/radialdreams.com\",\n category: \"web\"\n },\n {\n title: \"Glitch Performer\",\n description: \"A glitch app for the web. 6 different models to chose from. Add images, video, audio and glitch it out. Binaural audio tones and lots of sliders and knobs to get lost in. Has an auto glitch button for automated effects.\",\n image: \"\/HDE\/public\/img\/glitch2.gif\",\n link: \"https:\/\/glitchperformer.com\",\n category: \"web\"\n },\n {\n title: \"Midnight Death Drive-In Theatre\",\n description: \"Create your own drive-in movie theater. Load your trailers and movies in and let it run forever. Plays ads, intermissions, trailers, countdown timer and your movie on repeat.\",\n image: \"\/HDE\/public\/img\/mddt.png\",\n link: \"https:\/\/midnightdeath.com\",\n category: \"web\"\n },\n {\n title: \"Hot Dog Finder\",\n description: \"Find the best hot dogs near you. Search for hot dog stands, restaurants, and food trucks in your area.\",\n image: \"\/HDE\/public\/img\/hotdog.png\",\n link: \"https:\/\/www.hotdogfinder.com\/\",\n category: \"web\"\n },\n {\n title: \"Rad Drummer\",\n description: \"Drum pattern sequencer and machine. Create your own beats and patterns and then sequence them into a song. Load your own samples or choose from several default kits. Export to 16bit and 24bit wav audio file.\",\n image: \"\/HDE\/public\/img\/raddrummer.png\",\n link: \"\/HDE\/public\/rad-drummer.html\",\n category: \"web\"\n }, \n {\n title: \"MPC 2000XXXL\",\n description: \"A web based music production workstation inspired by the Akai MPC. Sample, sequence and produce your own beats and songs. Load your own samples or use the built in kits. Export your projects as wav files.\",\n image: \"\/HDE\/public\/img\/mpc.png\",\n link: \"\/HDE\/public\/mpc2000xxxl.html\",\n category: \"web\"\n }, \n {\n title: \"Mr. Sample SP-0203\",\n description: \"Classic sampler web app inspired by the SP-202 and SP-303. Sample, and produce your own beats. Load your own samples or use the built in kits.\",\n image: \"\/HDE\/public\/img\/mrsample.png\",\n link: \"\/HDE\/public\/sp0203.html\",\n category: \"web\"\n }, \n {\n title: \"Trashcam Portalstudio 420 MK-II\",\n description: \"A web based 8 track cassette tape recorder inspired by the Portastudio MK-II. Record and mix your own songs with this lo-fi classic.\",\n image: \"\/HDE\/public\/img\/portastudio.png\",\n link: \"\/HDE\/public\/portastudio.html\",\n category: \"web\"\n }, \n {\n title: \"Kasio SK-555\",\n description: \"A web based keyboard inspired by the Casio SK-5. Sample and play with this classic toy keyboard. Record your own samples and annoy your friends.\",\n image: \"\/HDE\/public\/img\/sk555.png\",\n link: \"\/HDE\/public\/sk555.html\",\n category: \"web\"\n }, \n {\n title: \"Crush 64 Synthesizer\",\n description: \"A web based synthesizer inspired by the Commodore 64 SID chip. Create your own chiptune sounds and music with this classic synth.\",\n image: \"\/HDE\/public\/img\/crush64.png\",\n link: \"\/HDE\/public\/crush64.html\",\n category: \"web\"\n }, \n {\n title: \"GBC Sequencer\",\n description: \"A web based sequencer inspired by the one used in Game Boy Camera. Sequence your songs from patterns created. Includes individual note pitch shift.\",\n image: \"\/HDE\/public\/img\/gbcsequencer.png\",\n link: \"\/HDE\/public\/gbc_sequencer.html\",\n category: \"web\"\n }, \n {\n title: \"Fractalator\",\n description: \"A web based kaossilator with a video out that warps fractals.\",\n image: \"\/HDE\/public\/img\/fractalator.png\",\n link: \"\/HDE\/public\/fractalator.html\",\n category: \"web\"\n }, \n {\n title: \"Fractal2mp4\",\n description: \"A web based fractal video generator. Create your own fractal videos and export them as mp4 files.\",\n image: \"\/HDE\/public\/img\/fractal2mp4.png\",\n link: \"\/HDE\/public\/fractal2mp4.html\",\n category: \"web\"\n }, \n {\n title: \"WAVtracks\",\n description: \"A web based multitrack audio recorder and editor. Record and mix your own songs with this simple but powerful web app. Choose from various instruments, record and import live audio. MIDI supported! Export your projects as wav files.\",\n image: \"\/HDE\/public\/img\/wavtracks.png\",\n link: \"\/HDE\/public\/wavtracks\/wavtracks.html\",\n category: \"web\"\n },\n \/\/ Games\n {\n title: \"TV Shooter\",\n description: \"A retro 3d first person shooter game. Shoot the TV while youtube videos play. 10 - 30 shots causes the TV to blow up and changes the video. Free to play and ad free!\",\n image: \"\/HDE\/public\/img\/tvshooter.png\",\n link: \"https:\/\/highdensityengineering.com\/tvshooter\/index.html\",\n category: \"games\"\n }, \n {\n title: \"Pogo Or Die\",\n description: \"Pogo around in your living room to music and try not to hit the ceiling fan. Free to play and ad free!\",\n image: \"\/HDE\/public\/img\/pogo.png\",\n link: \"https:\/\/highdensityengineering.com\/pogo\/index.html\",\n category: \"games\"\n },\n {\n title: \"Shadows in the Woods\",\n description: \"A dark ghost hunting game in a cemetery in the woods. Explore the area and check out what's lurking deep within the woods.\",\n image: \"\/HDE\/public\/img\/sitw.png\",\n link: \"https:\/\/crypt-girl.vercel.app\/\",\n category: \"games\"\n },\n {\n title: \"Knitting VR\",\n description: \"A VR 3d knitting simulator. Knit scarves and hats and socks in a cozy cabin in the woods. Up to 4 players can knit together and voice chat with new DJ mode listening parties. Free to play and ad free!\",\n image: \"\/HDE\/public\/img\/knit.png\",\n link: \"https:\/\/knittingvr.com\/\",\n category: \"vr\"\n },\n {\n title: \"Grandmaverse\",\n description: \"A place for grandmas to play games about grandmas. Breakdance or play Kostco Klone, a costco inspired simulator where you eat $1.50 hotdogs and try not to shit your pants!\",\n image: \"\/HDE\/public\/img\/grandmaverse.png\",\n link: \"https:\/\/grandmaverse.com\/\",\n category: \"games\"\n },\n {\n title: \"Station 7: Olympic National Forest, 1983\",\n description: \"A first person survival horror game. You are lost deep in the woods. Strange things are happening in the forest.\",\n image: \"\/HDE\/public\/img\/sasquatch.png\",\n link: \"https:\/\/station7horror.com\/\",\n category: \"games\"\n },\n {\n title: \"Pac Attack\",\n description: \"A Pac-Man inspired game with level editor. Create your own mazes and share them with friends.\",\n image: \"\/HDE\/public\/img\/pacman.png\",\n link: \"https:\/\/pacman-level-editor.vercel.app\/\",\n category: \"games\"\n },\n {\n title: \"Bongris\",\n description: \"It's 4:20 bro. A chill tetris-style puzzle game with a twist. Relax and stack blocks.\",\n image: \"\/HDE\/public\/img\/bongris.png\",\n link: \"https:\/\/bongris.vercel.app\/\",\n category: \"games\"\n },\n {\n title: \"Mad Dude 3d\",\n description: \"Play as a mad dude in a maze on a 3d rotating cube. Get power ups and avoid the enemies. Collect all 6 stars on the cube to proceed to next level.\",\n image: \"\/HDE\/public\/img\/maddude3d.png\",\n link: \"https:\/\/maddude3d.com\",\n category: \"games\"\n },\n {\n title: \"After Hours Barcade\",\n description: \"A virtual barcade with playable games for adults only. Chat and play with your friends in a virtual bar. Buy drugs, sell drugs and explore the neighborhood! Free to play and ad free!\",\n image: \"\/HDE\/public\/img\/ahb.png\",\n link: \"https:\/\/afterhoursbarcade.com\",\n category: \"games\"\n },\n {\n title: \"PlumageIQ\",\n description: \"An impressionist bird game. Boost your IQ about birds and learn about impressionists artists and their paintings. A relaxing experience for bird and art lovers alike.\",\n image: \"\/HDE\/public\/img\/piq.png\",\n link: \"https:\/\/plumageiq.com\",\n category: \"games\"\n },\n {\n title: \"Graffiti Killers (Unfinished Prototype)\",\n description: \"A 2d side scrolling retro modern era civil war game, where you settle your differences in the streets. Spray paint the walls and claim your turf. Watch out for the zombies!\",\n image: \"\/HDE\/public\/img\/gf.png\",\n link: \"https:\/\/zombiebloodtrails.com\",\n category: \"games\"\n },\n {\n title: \"Wordcicle\",\n description: \"A winter word game. Pop the dripping icicles to spell words. Compete against the world to get on the leaderboard. Multilingual - English, Spanish or French!\",\n image: \"\/HDE\/public\/img\/wordcicle.png\",\n link: \"https:\/\/wordcicle.com\",\n category: \"games\"\n },\n {\n title: \"Gradient Nights v0.1\",\n description: \"A trippy primitive 3d retro walking simulator on drugs game! Find the spheres and take class a drugs. Hidden secrets and easter eggs. A work in progress.\",\n image: \"\/HDE\/public\/img\/gn.png\",\n link: \"https:\/\/gradient-nights.vercel.app\/\",\n category: \"games\"\n },\n {\n title: \"Xtreme Flip\",\n description: \"A skateboarding mobile game where you flip your phone in the air to do tricks. New tricks recently added! Free-skate and timed modes. Trick history report.\",\n image: \"\/HDE\/public\/img\/deck2.jpg\",\n link: \"https:\/\/xtremeflip.com\",\n category: \"games\"\n }, \n \/\/Apps\n {\n title: \"Real TV Manager v1.0.0\",\n description: \"Available as an Appimage for Linux. Windows coming soon. Mix mp4's and live m3u urls into one live tv experience. Create unlimited channels!\",\n image: \"\/HDE\/public\/img\/rtvm.mp4\",\n link: \"https:\/\/highdensityengineering.com\/?ppec-products=real-tv-manager-v1-0-0-for-linux\",\n category: \"apps\",\n price: \"$4.99\"\n },\n {\n title: \"Terminal TV+ v1.1\",\n description: \"CLI app for windows to watch live iptv. Search by keyword or channel name. Includes test channels. Linux and android coming soon!\",\n image: \"\/HDE\/public\/img\/ttvp.png\",\n link: \"https:\/\/highdensityengineering.com\/?ppec-products=terminal-tv-v1-1\",\n category: \"apps\",\n price: \"$2.99\"\n } \n ];\n\n \/\/ Populate grid\n function populateGrid() {\n const grid = document.getElementById('projectGrid');\n grid.innerHTML = projects.map((project, index) => `\n <div class=\"project-card\" data-category=\"${project.category}\" onclick=\"openModal(${index})\">\n <img decoding=\"async\" class=\"card-image\" src=\"${project.image}\" alt=\"${project.title}\">\n <div class=\"card-content\">\n <h3 class=\"card-title\">${project.title}<\/h3>\n <p class=\"card-category\">${project.category}<\/p>\n <\/div>\n <\/div>\n `).join('');\n }\n\n \/\/ Filter projects\n function filterProjects(category) {\n const cards = document.querySelectorAll('.project-card');\n cards.forEach(card => {\n if (category === 'all' || card.dataset.category === category) {\n card.classList.remove('hidden');\n } else {\n card.classList.add('hidden');\n }\n });\n\n \/\/ Update active button\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n event.target.classList.add('active');\n }\n\n \/\/ Open modal\n function openModal(index) {\n const project = projects[index];\n document.getElementById('modalImage').src = project.image;\n document.getElementById('modalTitle').textContent = project.title;\n document.getElementById('modalDescription').textContent = project.description;\n \n const priceEl = document.getElementById('modalPrice');\n if (project.price) {\n priceEl.textContent = project.price;\n priceEl.style.display = 'block';\n } else {\n priceEl.style.display = 'none';\n }\n\n const buttonEl = document.getElementById('modalButton');\n buttonEl.href = project.link;\n buttonEl.textContent = project.price ? 'BUY NOW \u2192' : 'PLAY NOW \u2192';\n\n document.getElementById('modal').classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n\n \/\/ Close modal\n function closeModal() {\n document.getElementById('modal').classList.remove('active');\n document.body.style.overflow = 'auto';\n }\n document.body.style.overflow = 'auto';\n\n \/\/ Close modal on overlay click\n document.getElementById('modal').addEventListener('click', function(e) {\n if (e.target === this) {\n closeModal();\n }\n });\n\n \/\/ Close modal with Escape key\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') {\n closeModal();\n closeUfoModal();\n }\n });\n\n \/\/ Setup filter buttons\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.addEventListener('click', function() {\n filterProjects(this.dataset.filter);\n });\n });\n\n \/\/ Initialize\n populateGrid();\n <\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"<p>High Density Engineering HDE All Games VR Web Apps Apps \u00d7 Loading 3D Model…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"iawp_total_views":241,"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":5,"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":693,"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/693"}],"wp:attachment":[{"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":14,"date":"2026-01-29T14:38:55","date_gmt":"2026-01-29T14:38:55","guid":{"rendered":"https:\/\/highdensityengineering.com\/?page_id=14"},"modified":"2026-07-03T14:51:14","modified_gmt":"2026-07-03T14:51:14","slug":"home","status":"publish","type":"page","link":"https:\/\/highdensityengineering.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n\n\n \n \n High Density Engineering<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@700;900&family=JetBrains+Mono:wght@400;600&display=swap\" rel=\"stylesheet\">\n <style>\n \/* WORDPRESS OVERRIDE - FORCE FULL WIDTH *\/\n body, html {\n margin: 0 !important;\n padding: 0 !important;\n max-width: 100% !important;\n width: 100% !important;\n box-sizing: border-box !important;\n }\n\n #page, #content, .site, .site-content, \n .entry-content, .page, article, main, \n div[class*=\"container\"], div[class*=\"wrapper\"], .hfeed {\n margin: 0 !important;\n padding: 0.2vh 0 !important;\n max-width: 100% !important;\n width: 100% !important;\n box-sizing: border-box !important;\n }\n \n \/* Force header full width *\/\n .header, header, [class*=\"header\"] {\n width: 100% !important;\n max-width: 100% !important;\n min-width: 100% !important;\n }\n \n @font-face {\n font-family: AlienHieroglyph;\n src: url('\/HDE\/public\/font\/AlienHieroglyph-Regular.ttf') format('truetype');\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n --bg-primary: #000000;\n --accent-cyan: #00eeff;\n --accent-magenta: #0011ff;\n --text-primary: #ffffff;\n --text-secondary: #888888;\n }\n\n body {\n min-height: 100vh;\n position: relative;\n font-family: 'JetBrains Mono', monospace;\n background:\n \/* Crystal glow *\/\n radial-gradient(circle at 15% 15%,\n rgba(160,255,255,.35),\n transparent 28%),\n\n radial-gradient(circle at 80% 20%,\n rgba(110,180,255,.30),\n transparent 30%),\n\n radial-gradient(circle at 50% 85%,\n rgba(90,230,255,.20),\n transparent 35%),\n\n \/* Giant crystal faces *\/\n linear-gradient(120deg,\n transparent 0%,\n rgba(255,255,255,.08) 18%,\n transparent 22%),\n\n linear-gradient(60deg,\n transparent 0%,\n rgba(180,255,255,.10) 30%,\n transparent 35%),\n\n linear-gradient(-55deg,\n transparent 0%,\n rgba(255,255,255,.12) 40%,\n transparent 45%),\n\n linear-gradient(-120deg,\n transparent 0%,\n rgba(120,240,255,.08) 70%,\n transparent 74%),\n\n linear-gradient(\n 180deg,\n #3b7fff 0%,\n #3442ff 22%,\n #2e77cf 55%,\n #13264f 80%,\n #050812 100%\n );\n\n background-attachment:fixed;\n color: var(--text-primary);\n overflow-x: hidden;\n }\n\n \/* Noise *\/\n\n body > * {\n position: relative;\n z-index: 1;\n }\n\n body::after{\n content:\"\";\n position:fixed;\n inset:0;\n pointer-events:none;\n\n background:\n radial-gradient(circle, rgba(255,255,255,.35) 0%, transparent 55%) 15% 20%\/220px 220px,\n radial-gradient(circle, rgba(120,255,255,.25) 0%, transparent 55%) 70% 35%\/300px 300px,\n radial-gradient(circle, rgba(255,255,255,.30) 0%, transparent 55%) 80% 80%\/180px 180px,\n radial-gradient(circle, rgba(180,220,255,.20) 0%, transparent 55%) 25% 75%\/260px 260px;\n\n filter:blur(25px);\n animation:floatCrystals 12s ease-in-out infinite alternate;\n}\n\n@keyframes floatCrystals{\n\n from{\n transform:translateY(-15px);\n }\n\n to{\n transform:translateY(20px);\n }\n\n}\n\n \/* Chrome, Edge, Safari *\/\n ::-webkit-scrollbar {\n width: 12px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: rgba(0, 255, 100, 0.08);\n backdrop-filter: blur(4px);\n border: 1px solid #00ff66;\n border-radius: 12px;\n box-shadow:\n inset 0 0 6px rgba(0,255,100,0.5),\n 0 0 8px #00ff66;\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 255, 120, 0.3);\n box-shadow:\n 0 0 10px #00ff66,\n 0 0 18px #00ff66;\n }\n\n \/* Firefox *\/\n * {\n scrollbar-width: thin;\n scrollbar-color: #00ff66 transparent;\n }\n\n \/* ACTUAL VISIBLE animation *\/\n @keyframes slowDrift {\n 0% { transform: translate(0, 0); }\n 50% { transform: translate(-3%, -3%); }\n 100% { transform: translate(0, 0); }\n }\n\n \/* 3D Model Container *\/\n #model-container {\n width: 100%;\n height: 500px;\n margin: 30px 0;\n padding: 10px 0 10px 0;\n position: relative;\n background-color: transparent; \/* Dark background so we can see it *\/\n }\n \n #model-container canvas {\n display: block;\n width: 100% !important;\n height: 100% !important;\n }\n \n .loading-indicator {\n position: relative;\n color: var(--accent-cyan);\n font-size: 1.2rem;\n text-align: center;\n z-index: 10;\n }\n \n .loading-spinner {\n width: 50px;\n height: 50px;\n border: 4px solid rgba(177, 255, 154, 0.2);\n border-top: 4px solid var(--accent-cyan);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 10% auto 10%;\n }\n\n \/* Header *\/\n .header {\n font-family: 'AlienHieroglyph';\n text-align: center;\n padding: 30px 20px 0px 20px;\n position: sticky;\n top: 0;\n background: rgba(0, 0, 0, 0.95);\n z-index: 100;\n backdrop-filter: blur(10px);\n }\n\n .header h1 {\n font-size: 2.5rem;\n margin-bottom: 10px;\n color: #00a2ff;\n background: linear-gradient(90deg, #00a2ff11, #b1ff9a11);\n filter: drop-shadow(0 0 10px #00a2ff);\n }\n\n .header p {\n font-size: 1rem;\n color: #ff00ea;\n }\n\n .filter-btn, .ufo-btn, .support-btn {\n padding: 8px 5px;\n background: transparent;\n border: 2px solid var(--accent-cyan);\n color: var(--accent-cyan);\n font-family: 'Orbitron', sans-serif;\n font-size: 0.7rem;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n position: relative;\n overflow: hidden;\n }\n\n .filter-btn::before, .ufo-btn::before, .support-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: var(--accent-cyan);\n transition: left 0.3s ease;\n z-index: -1;\n }\n\n .filter-btn:hover::before,\n .filter-btn.active::before,\n .ufo-btn:hover::before,\n .ufo-btn.active::before,\n .support-btn:hover::before,\n .support-btn.active::before {\n left: 0;\n }\n\n .filter-btn:hover,\n .filter-btn.active,\n .ufo-btn:hover,\n .ufo-btn.active,\n .support-btn:hover,\n .support-btn.active {\n color: #000;\n }\n\n \/* Grid Container *\/\n .grid-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n border: 4px solid rgba(255, 255, 255, 0.2);\n }\n\n \/* Project Card *\/\n .project-card {\n position: relative;\n background: rgba(0, 0, 0, 0.8);\n border: 2px solid rgba(0, 162, 255, 0.3);\n cursor: pointer;\n transition: all 0.3s ease;\n overflow: hidden;\n aspect-ratio: 1;\n display: flex;\n flex-direction: column;\n }\n\n .project-card:hover {\n transform: translateY(-5px);\n border-color: var(--accent-cyan);\n box-shadow: 0 10px 40px rgba(177, 255, 154, 0.4);\n }\n\n .project-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 3px;\n background: linear-gradient(90deg, var(--accent-cyan), var(--accent-magenta));\n transform: scaleX(0);\n transition: transform 0.3s ease;\n }\n\n .project-card:hover::before {\n transform: scaleX(1);\n }\n\n .card-image {\n width: 100%;\n height: 70%;\n object-fit: cover;\n display: block;\n }\n\n .card-content {\n padding: 15px;\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .card-title {\n font-family: 'Orbitron', sans-serif;\n font-size: 1.1rem;\n margin-bottom: 5px;\n color: var(--accent-cyan);\n text-align: center;\n }\n\n .card-category {\n font-size: 0.75rem;\n color: var(--text-secondary);\n text-align: center;\n text-transform: uppercase;\n }\n\n \/* Modal Overlay *\/\n .modal-overlay {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.95);\n z-index: 1000;\n overflow-y: auto;\n animation: fadeIn 0.3s ease;\n }\n\n .modal-overlay.active {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .modal-content {\n background: rgba(0, 0, 0, 0.95);\n border: 3px solid var(--accent-cyan);\n max-width: 900px;\n width: 100%;\n padding: 40px;\n position: relative;\n animation: slideUp 0.3s ease;\n }\n\n @keyframes slideUp {\n from { \n opacity: 0;\n transform: translateY(50px);\n }\n to { \n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .modal-close {\n position: absolute;\n top: 0;\n right: 0;\n background: transparent;\n border: 2px solid var(--accent-magenta);\n color: var(--accent-magenta);\n width: 40px;\n height: 40px;\n font-size: 24px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .modal-close:hover {\n background: var(--accent-magenta);\n color: #000;\n transform: rotate(90deg);\n }\n\n .modal-image {\n width: 100%;\n max-height: 250px;\n object-fit: contain;\n margin-bottom: 30px;\n border: 2px solid var(--accent-magenta);\n }\n\n .modal-title {\n font-family: 'Orbitron', sans-serif;\n font-size: 2rem;\n margin-bottom: 15px;\n color: var(--accent-cyan);\n }\n\n .modal-description {\n color: var(--text-secondary);\n line-height: 1.8;\n margin-bottom: 30px;\n font-size: 1.1rem;\n }\n\n .modal-price {\n color: #33ff00;\n font-size: 1.8rem;\n margin-bottom: 20px;\n font-weight: bold;\n }\n\n .modal-button {\n display: inline-block;\n padding: 15px 40px;\n background: transparent;\n border: 2px solid var(--accent-magenta);\n color: var(--accent-magenta);\n text-decoration: none;\n font-weight: 600;\n font-size: 1.1rem;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .modal-button::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: var(--accent-magenta);\n transition: left 0.3s ease;\n z-index: -1;\n }\n\n .modal-button:hover::before {\n left: 0;\n }\n\n .modal-button:hover {\n color: #33ff00;\n }\n\n \/* Hidden class for filtering *\/\n .hidden {\n display: none;\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .grid-container {\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 15px;\n padding: 20px 10px;\n }\n\n .header h1 {\n font-size: 1.8rem;\n }\n\n .filter-btn, .ufo-btn {\n padding: 10px 15px;\n font-size: 0.8rem;\n }\n\n .modal-content {\n padding: 25px;\n }\n\n .modal-title {\n font-size: 1.5rem;\n }\n }\n .deck {\n display: block;\n width: 50%;\n margin: 0 auto;\n }\n .logo {\n width: 75%;\n height: auto;\n max-width: 450px;\n mix-blend-mode: normal;\n filter: saturate(150%) contrast(1.1);\n display: block;\n margin: 0 auto;\n }\n \/* Filter Tabs *\/\n .filter-container {\n display: flex;\n justify-content: center;\n gap: 8px;\n background: rgba(78, 78, 78, 0.3) !important;\n position: sticky;\n top: 110px;\n left: 0;\n z-index: 99;\n width: 100%;\n backdrop-filter: blur(10px) !important;\n flex-wrap: wrap;\n }\n <\/style>\n <meta name=\"monetag\" content=\"d844fb3de1e0fb2f614d0ba9365c1c89\">\n<\/head>\n<body>\n <video class=\"logo\" src=\"\/HDE\/public\/vid\/logo5.mp4\" autoplay muted loop><\/video>\n <div class=\"header\">\n <h1>HDE<\/h1>\n <div class=\"filter-container\">\n <button class=\"filter-btn active\" data-filter=\"all\">All<\/button>\n <button class=\"filter-btn\" data-filter=\"games\">Games<\/button>\n <button class=\"filter-btn\" data-filter=\"vr\">VR<\/button>\n <button class=\"filter-btn\" data-filter=\"web\">Web Apps<\/button>\n <button class=\"filter-btn\" data-filter=\"apps\">Apps<\/button>\n <\/div>\n <\/div>\n\n <div class=\"grid-container\" id=\"projectGrid\">\n \n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"modal\">\n <div class=\"modal-content\">\n <button class=\"modal-close\" onclick=\"closeModal()\">\u00d7<\/button>\n <img decoding=\"async\" class=\"modal-image\" id=\"modalImage\" src=\"\" alt=\"\">\n <h2 class=\"modal-title\" id=\"modalTitle\"><\/h2>\n <p class=\"modal-description\" id=\"modalDescription\"><\/p>\n <p class=\"modal-price\" id=\"modalPrice\"><\/p>\n <a class=\"modal-button\" id=\"modalButton\" href=\"\" target=\"_blank\"><\/a>\n <\/div>\n <\/div>\n \n \n <div id=\"model-container\">\n <div class=\"loading-indicator\">\n <div class=\"loading-spinner\"><\/div>\n <div>Loading 3D Model…<\/div>\n <\/div>\n <\/div>\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n <script>\n \/\/ Wait for DOM to be ready\n document.addEventListener('DOMContentLoaded', function() {\n console.log('DOM loaded, starting 3D viewer setup...');\n \n const container = document.getElementById('model-container');\n console.log('Container found:', container);\n console.log('Container dimensions:', container.clientWidth, 'x', container.clientHeight);\n \n if (!container) {\n console.error('ERROR: model-container not found!');\n return;\n }\n \n if (container.clientWidth === 0 || container.clientHeight === 0) {\n console.error('ERROR: Container has no size!');\n return;\n }\n \n \/\/ Scene Setup\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n console.log('Scene created');\n \n const camera = new THREE.PerspectiveCamera(\n 75, \n container.clientWidth \/ container.clientHeight, \n 1, \n 1000\n );\n console.log('Camera created');\n \n const renderer = new THREE.WebGLRenderer({ \n antialias: true,\n alpha: true,\n powerPreference: 'high-performance'\n });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(window.devicePixelRatio); \/\/ Use device pixel ratio for sharper rendering\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n container.appendChild(renderer.domElement);\n console.log('Renderer created with high quality settings');\n console.log('Canvas element:', renderer.domElement);\n\n \/\/ Lighting - Multiple lights from different angles\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\n scene.add(ambientLight);\n console.log('Ambient light added');\n \n \/\/ Front light (from camera direction)\n const frontLight = new THREE.DirectionalLight(0xffffff, 0.8);\n frontLight.position.set(0, 0, 10);\n scene.add(frontLight);\n \n \/\/ Top light\n const topLight = new THREE.DirectionalLight(0xffffff, 0.6);\n topLight.position.set(0, 10, 0);\n scene.add(topLight);\n \n \/\/ Back light (rim lighting)\n const backLight = new THREE.DirectionalLight(0x00fff2, 0.4);\n backLight.position.set(0, 0, -10);\n scene.add(backLight);\n \n \/\/ Side lights\n const leftLight = new THREE.DirectionalLight(0xb1ff9a, 0.3);\n leftLight.position.set(-10, 0, 0);\n scene.add(leftLight);\n \n const rightLight = new THREE.DirectionalLight(0xb1ff9a, 0.3);\n rightLight.position.set(-10, 0, 0);\n scene.add(rightLight);\n \n console.log('All lights added');\n\n \/\/ Loading the GLB File (textures baked in)\n const loader = new THREE.GLTFLoader();\n \n \/\/ Get loading indicator\n const loadingIndicator = container.querySelector('.loading-indicator');\n \n console.log('Starting to load GLB...');\n \n loader.load(\n '\/HDE\/public\/img\/Meshy_AI_Dead_Rats_0418185502_texture.glb',\n function(gltf) {\n console.log('GLB loaded successfully!', gltf);\n \n const object = gltf.scene;\n \n \/\/ Hide loading indicator and show canvas\n if (loadingIndicator) {\n loadingIndicator.style.display = 'none';\n }\n renderer.domElement.style.display = 'block';\n \n \/\/ GLB already has materials and textures baked in, just enhance them\n object.traverse(function(child) {\n if (child instanceof THREE.Mesh) {\n \/\/ Enhance existing materials for better rendering\n if (child.material) {\n child.material.metalness = 0.3; \/\/ Less shiny\n child.material.roughness = 0.8; \/\/ More matte\n }\n child.castShadow = true;\n child.receiveShadow = true;\n }\n });\n \n \/\/ Scale the model 8x larger (doubled from 4x)\n object.scale.set(8, 8, 8);\n \n \/\/ NOW calculate bounding box and center (after scaling)\n const box = new THREE.Box3().setFromObject(object);\n const center = new THREE.Vector3();\n const size = new THREE.Vector3();\n box.getCenter(center);\n box.getSize(size);\n \n \/\/ Center the object at origin for proper rotation\n object.position.sub(center);\n\n \/\/ Position camera to center the model in view\n const maxDim = Math.max(size.x, size.y, size.z);\n const fov = camera.fov * (Math.PI \/ 180);\n let cameraZ = Math.abs(maxDim \/ 2 \/ Math.tan(fov \/ 2));\n cameraZ *= 1.25; \/\/ Reduced multiplier so larger model appears bigger\n \n camera.position.set(0, 0, cameraZ);\n camera.lookAt(0, 0, 0);\n camera.updateProjectionMatrix();\n \n console.log('Camera positioned at z:', cameraZ);\n\n scene.add(object);\n \n \/\/ Mouse interaction variables\n let isDragging = false;\n let previousMousePosition = { x: 0, y: 0 };\n \n \/\/ Mouse down\n container.addEventListener('mousedown', function(e) {\n isDragging = true;\n previousMousePosition = {\n x: e.clientX,\n y: e.clientY\n };\n });\n \n \/\/ Mouse move\n container.addEventListener('mousemove', function(e) {\n if (isDragging) {\n const deltaX = e.clientX - previousMousePosition.x;\n const deltaY = e.clientY - previousMousePosition.y;\n \n object.rotation.y += deltaX * 0.01;\n object.rotation.x += deltaY * 0.01;\n \n previousMousePosition = {\n x: e.clientX,\n y: e.clientY\n };\n }\n });\n \n \/\/ Mouse up\n container.addEventListener('mouseup', function() {\n isDragging = false;\n });\n \n \/\/ Mouse leave\n container.addEventListener('mouseleave', function() {\n isDragging = false;\n });\n \n \/\/ \/\/ Mouse wheel zoom\n \/\/ container.addEventListener('wheel', function(e) {\n \/\/ e.preventDefault();\n \/\/ const zoomSpeed = 0.1;\n \/\/ camera.position.z += e.deltaY * zoomSpeed;\n \/\/ \/\/ Limit zoom distance\n \/\/ camera.position.z = Math.max(2, Math.min(50, camera.position.z));\n \/\/ });\n \n console.log('Mouse controls enabled: drag to rotate, scroll to zoom');\n \n \/\/ Auto-rotate when not dragging\n function animate() {\n requestAnimationFrame(animate);\n \n \/\/ Removed auto-rotation - only manual drag now\n \n renderer.render(scene, camera);\n }\n animate();\n },\n function(xhr) {\n console.log('GLB loading progress: ' + (xhr.loaded \/ xhr.total * 100) + '% loaded');\n },\n function(error) {\n console.error('Error loading GLB file:', error);\n console.log('Check that the file path is correct: \/HDE\/public\/img\/Meshy_AI_Dead_Rats_0418185502_texture.glb');\n }\n );\n\n \/\/ Handle window resizing\n window.addEventListener('resize', function() {\n camera.aspect = container.clientWidth \/ container.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.clientWidth, container.clientHeight);\n });\n });\n <\/script>\n <script>\n \/\/ Project database\n const projects = [\n \/\/ Web Apps\n {\n title: \"Crystalline Player\",\n description: \"A web based music and video player visualized in a beautiful and relaxing 3d crystal dimension. Created by HDE and kkoonnss. Free to use and ad free!\",\n image: \"\/HDE\/public\/img\/crystallineplayer.png\",\n link: \"https:\/\/crystallineplayer.vercel.app\",\n category: \"web\"\n }, \n {\n title: \"Radial Dreams\",\n description: \"Trip your audio and video out with realtime effects processing. Import video or use your camera.\",\n image: \"\/HDE\/public\/img\/rd.png\",\n link: \"https:\/\/radialdreams.com\",\n category: \"web\"\n },\n {\n title: \"Glitch Performer\",\n description: \"A glitch app for the web. 6 different models to chose from. Add images, video, audio and glitch it out. Binaural audio tones and lots of sliders and knobs to get lost in. Has an auto glitch button for automated effects.\",\n image: \"\/HDE\/public\/img\/glitch2.gif\",\n link: \"https:\/\/glitchperformer.com\",\n category: \"web\"\n },\n {\n title: \"Midnight Death Drive-In Theatre\",\n description: \"Create your own drive-in movie theater. Load your trailers and movies in and let it run forever. Plays ads, intermissions, trailers, countdown timer and your movie on repeat.\",\n image: \"\/HDE\/public\/img\/mddt.png\",\n link: \"https:\/\/midnightdeath.com\",\n category: \"web\"\n },\n {\n title: \"Hot Dog Finder\",\n description: \"Find the best hot dogs near you. Search for hot dog stands, restaurants, and food trucks in your area.\",\n image: \"\/HDE\/public\/img\/hotdog.png\",\n link: \"https:\/\/www.hotdogfinder.com\/\",\n category: \"web\"\n },\n {\n title: \"Rad Drummer\",\n description: \"Drum pattern sequencer and machine. Create your own beats and patterns and then sequence them into a song. Load your own samples or choose from several default kits. Export to 16bit and 24bit wav audio file.\",\n image: \"\/HDE\/public\/img\/raddrummer.png\",\n link: \"\/HDE\/public\/rad-drummer.html\",\n category: \"web\"\n }, \n {\n title: \"MPC 2000XXXL\",\n description: \"A web based music production workstation inspired by the Akai MPC. Sample, sequence and produce your own beats and songs. Load your own samples or use the built in kits. Export your projects as wav files.\",\n image: \"\/HDE\/public\/img\/mpc.png\",\n link: \"\/HDE\/public\/mpc2000xxxl.html\",\n category: \"web\"\n }, \n {\n title: \"Mr. Sample SP-0203\",\n description: \"Classic sampler web app inspired by the SP-202 and SP-303. Sample, and produce your own beats. Load your own samples or use the built in kits.\",\n image: \"\/HDE\/public\/img\/mrsample.png\",\n link: \"\/HDE\/public\/sp0203.html\",\n category: \"web\"\n }, \n {\n title: \"Trashcam Portalstudio 420 MK-II\",\n description: \"A web based 8 track cassette tape recorder inspired by the Portastudio MK-II. Record and mix your own songs with this lo-fi classic.\",\n image: \"\/HDE\/public\/img\/portastudio.png\",\n link: \"\/HDE\/public\/portastudio.html\",\n category: \"web\"\n }, \n {\n title: \"Kasio SK-555\",\n description: \"A web based keyboard inspired by the Casio SK-5. Sample and play with this classic toy keyboard. Record your own samples and annoy your friends.\",\n image: \"\/HDE\/public\/img\/sk555.png\",\n link: \"\/HDE\/public\/sk555.html\",\n category: \"web\"\n }, \n {\n title: \"Crush 64 Synthesizer\",\n description: \"A web based synthesizer inspired by the Commodore 64 SID chip. Create your own chiptune sounds and music with this classic synth.\",\n image: \"\/HDE\/public\/img\/crush64.png\",\n link: \"\/HDE\/public\/crush64.html\",\n category: \"web\"\n }, \n {\n title: \"GBC Sequencer\",\n description: \"A web based sequencer inspired by the one used in Game Boy Camera. Sequence your songs from patterns created. Includes individual note pitch shift.\",\n image: \"\/HDE\/public\/img\/gbcsequencer.png\",\n link: \"\/HDE\/public\/gbc_sequencer.html\",\n category: \"web\"\n }, \n {\n title: \"Fractalator\",\n description: \"A web based kaossilator with a video out that warps fractals.\",\n image: \"\/HDE\/public\/img\/fractalator.png\",\n link: \"\/HDE\/public\/fractalator.html\",\n category: \"web\"\n }, \n {\n title: \"Fractal2mp4\",\n description: \"A web based fractal video generator. Create your own fractal videos and export them as mp4 files.\",\n image: \"\/HDE\/public\/img\/fractal2mp4.png\",\n link: \"\/HDE\/public\/fractal2mp4.html\",\n category: \"web\"\n }, \n {\n title: \"WAVtracks\",\n description: \"A web based multitrack audio recorder and editor. Record and mix your own songs with this simple but powerful web app. Choose from various instruments, record and import live audio. MIDI supported! Export your projects as wav files.\",\n image: \"\/HDE\/public\/img\/wavtracks.png\",\n link: \"\/HDE\/public\/wavtracks\/wavtracks.html\",\n category: \"web\"\n },\n \/\/ Games\n {\n title: \"TV Shooter\",\n description: \"A retro 3d first person shooter game. Shoot the TV while youtube videos play. 10 - 30 shots causes the TV to blow up and changes the video. Free to play and ad free!\",\n image: \"\/HDE\/public\/img\/tvshooter.png\",\n link: \"https:\/\/highdensityengineering.com\/tvshooter\/index.html\",\n category: \"games\"\n }, \n {\n title: \"Pogo Or Die\",\n description: \"Pogo around in your living room to music and try not to hit the ceiling fan. Free to play and ad free!\",\n image: \"\/HDE\/public\/img\/pogo.png\",\n link: \"https:\/\/highdensityengineering.com\/pogo\/index.html\",\n category: \"games\"\n },\n {\n title: \"Shadows in the Woods\",\n description: \"A dark ghost hunting game in a cemetery in the woods. Explore the area and check out what's lurking deep within the woods.\",\n image: \"\/HDE\/public\/img\/sitw.png\",\n link: \"https:\/\/crypt-girl.vercel.app\/\",\n category: \"games\"\n },\n {\n title: \"Knitting VR\",\n description: \"A VR 3d knitting simulator. Knit scarves and hats and socks in a cozy cabin in the woods. Up to 4 players can knit together and voice chat with new DJ mode listening parties. Free to play and ad free!\",\n image: \"\/HDE\/public\/img\/knit.png\",\n link: \"https:\/\/knittingvr.com\/\",\n category: \"vr\"\n },\n {\n title: \"Grandmaverse\",\n description: \"A place for grandmas to play games about grandmas. Breakdance or play Kostco Klone, a costco inspired simulator where you eat $1.50 hotdogs and try not to shit your pants!\",\n image: \"\/HDE\/public\/img\/grandmaverse.png\",\n link: \"https:\/\/grandmaverse.com\/\",\n category: \"games\"\n },\n {\n title: \"Station 7: Olympic National Forest, 1983\",\n description: \"A first person survival horror game. You are lost deep in the woods. Strange things are happening in the forest.\",\n image: \"\/HDE\/public\/img\/sasquatch.png\",\n link: \"https:\/\/station7horror.com\/\",\n category: \"games\"\n },\n {\n title: \"Pac Attack\",\n description: \"A Pac-Man inspired game with level editor. Create your own mazes and share them with friends.\",\n image: \"\/HDE\/public\/img\/pacman.png\",\n link: \"https:\/\/pacman-level-editor.vercel.app\/\",\n category: \"games\"\n },\n {\n title: \"Bongris\",\n description: \"It's 4:20 bro. A chill tetris-style puzzle game with a twist. Relax and stack blocks.\",\n image: \"\/HDE\/public\/img\/bongris.png\",\n link: \"https:\/\/bongris.vercel.app\/\",\n category: \"games\"\n },\n {\n title: \"Mad Dude 3d\",\n description: \"Play as a mad dude in a maze on a 3d rotating cube. Get power ups and avoid the enemies. Collect all 6 stars on the cube to proceed to next level.\",\n image: \"\/HDE\/public\/img\/maddude3d.png\",\n link: \"https:\/\/maddude3d.com\",\n category: \"games\"\n },\n {\n title: \"After Hours Barcade\",\n description: \"A virtual barcade with playable games for adults only. Chat and play with your friends in a virtual bar. Buy drugs, sell drugs and explore the neighborhood! Free to play and ad free!\",\n image: \"\/HDE\/public\/img\/ahb.png\",\n link: \"https:\/\/afterhoursbarcade.com\",\n category: \"games\"\n },\n {\n title: \"PlumageIQ\",\n description: \"An impressionist bird game. Boost your IQ about birds and learn about impressionists artists and their paintings. A relaxing experience for bird and art lovers alike.\",\n image: \"\/HDE\/public\/img\/piq.png\",\n link: \"https:\/\/plumageiq.com\",\n category: \"games\"\n },\n {\n title: \"Graffiti Killers (Unfinished Prototype)\",\n description: \"A 2d side scrolling retro modern era civil war game, where you settle your differences in the streets. Spray paint the walls and claim your turf. Watch out for the zombies!\",\n image: \"\/HDE\/public\/img\/gf.png\",\n link: \"https:\/\/zombiebloodtrails.com\",\n category: \"games\"\n },\n {\n title: \"Wordcicle\",\n description: \"A winter word game. Pop the dripping icicles to spell words. Compete against the world to get on the leaderboard. Multilingual - English, Spanish or French!\",\n image: \"\/HDE\/public\/img\/wordcicle.png\",\n link: \"https:\/\/wordcicle.com\",\n category: \"games\"\n },\n {\n title: \"Gradient Nights v0.1\",\n description: \"A trippy primitive 3d retro walking simulator on drugs game! Find the spheres and take class a drugs. Hidden secrets and easter eggs. A work in progress.\",\n image: \"\/HDE\/public\/img\/gn.png\",\n link: \"https:\/\/gradient-nights.vercel.app\/\",\n category: \"games\"\n },\n {\n title: \"Xtreme Flip\",\n description: \"A skateboarding mobile game where you flip your phone in the air to do tricks. New tricks recently added! Free-skate and timed modes. Trick history report.\",\n image: \"\/HDE\/public\/img\/deck2.jpg\",\n link: \"https:\/\/xtremeflip.com\",\n category: \"games\"\n }, \n \/\/Apps\n {\n title: \"Real TV Manager v1.0.0\",\n description: \"Available as an Appimage for Linux. Windows coming soon. Mix mp4's and live m3u urls into one live tv experience. Create unlimited channels!\",\n image: \"\/HDE\/public\/img\/rtvm.mp4\",\n link: \"https:\/\/highdensityengineering.com\/?ppec-products=real-tv-manager-v1-0-0-for-linux\",\n category: \"apps\",\n price: \"$4.99\"\n },\n {\n title: \"Terminal TV+ v1.1\",\n description: \"CLI app for windows to watch live iptv. Search by keyword or channel name. Includes test channels. Linux and android coming soon!\",\n image: \"\/HDE\/public\/img\/ttvp.png\",\n link: \"https:\/\/highdensityengineering.com\/?ppec-products=terminal-tv-v1-1\",\n category: \"apps\",\n price: \"$2.99\"\n } \n ];\n\n \/\/ Populate grid\n function populateGrid() {\n const grid = document.getElementById('projectGrid');\n grid.innerHTML = projects.map((project, index) => `\n <div class=\"project-card\" data-category=\"${project.category}\" onclick=\"openModal(${index})\">\n <img decoding=\"async\" class=\"card-image\" src=\"${project.image}\" alt=\"${project.title}\">\n <div class=\"card-content\">\n <h3 class=\"card-title\">${project.title}<\/h3>\n <p class=\"card-category\">${project.category}<\/p>\n <\/div>\n <\/div>\n `).join('');\n }\n\n \/\/ Filter projects\n function filterProjects(category) {\n const cards = document.querySelectorAll('.project-card');\n cards.forEach(card => {\n if (category === 'all' || card.dataset.category === category) {\n card.classList.remove('hidden');\n } else {\n card.classList.add('hidden');\n }\n });\n\n \/\/ Update active button\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n event.target.classList.add('active');\n }\n\n \/\/ Open modal\n function openModal(index) {\n const project = projects[index];\n document.getElementById('modalImage').src = project.image;\n document.getElementById('modalTitle').textContent = project.title;\n document.getElementById('modalDescription').textContent = project.description;\n \n const priceEl = document.getElementById('modalPrice');\n if (project.price) {\n priceEl.textContent = project.price;\n priceEl.style.display = 'block';\n } else {\n priceEl.style.display = 'none';\n }\n\n const buttonEl = document.getElementById('modalButton');\n buttonEl.href = project.link;\n buttonEl.textContent = project.price ? 'BUY NOW \u2192' : 'PLAY NOW \u2192';\n\n document.getElementById('modal').classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n\n \/\/ Close modal\n function closeModal() {\n document.getElementById('modal').classList.remove('active');\n document.body.style.overflow = 'auto';\n }\n document.body.style.overflow = 'auto';\n\n \/\/ Close modal on overlay click\n document.getElementById('modal').addEventListener('click', function(e) {\n if (e.target === this) {\n closeModal();\n }\n });\n\n \/\/ Close modal with Escape key\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') {\n closeModal();\n closeUfoModal();\n }\n });\n\n \/\/ Setup filter buttons\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.addEventListener('click', function() {\n filterProjects(this.dataset.filter);\n });\n });\n\n \/\/ Initialize\n populateGrid();\n <\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"<p>High Density Engineering HDE All Games VR Web Apps Apps \u00d7 Loading 3D Model…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"iawp_total_views":241,"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":5,"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":693,"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/693"}],"wp:attachment":[{"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}