{"id":65,"date":"2026-01-04T15:51:05","date_gmt":"2026-01-04T15:51:05","guid":{"rendered":"https:\/\/aorphis.com\/home\/?page_id=65"},"modified":"2026-01-06T15:36:27","modified_gmt":"2026-01-06T15:36:27","slug":"projects","status":"publish","type":"page","link":"https:\/\/aorphis.com\/home\/projects\/","title":{"rendered":"Projects"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n PROJECT \/\/ OSIRIS_PROTOCOL<\/title>\r\n \r\n <!-- FAVICON -->\r\n <link rel=\"icon\" href=\"data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>\ud83d\udc41\ufe0f<\/text><\/svg>\">\r\n \r\n <!-- Fonts -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <!-- Tailwind CSS -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <!-- Icons -->\r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n <style>\r\n :root {\r\n \/* Palette: Necro-Gold *\/\r\n --void-black: #050505;\r\n --obsidian: #0a0a0a;\r\n --stone-dark: #141414;\r\n --gold-dim: #7d6b49;\r\n --gold-bright: #d4af37;\r\n --magic-glow: rgba(212, 175, 55, 0.2);\r\n }\r\n\r\n body {\r\n background-color: var(--void-black);\r\n color: #a8a095;\r\n font-family: 'Rajdhani', sans-serif;\r\n overflow-x: hidden;\r\n cursor: crosshair;\r\n }\r\n\r\n h1, h2, h3, h4, .tech-header {\r\n font-family: 'Orbitron', sans-serif;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n color: var(--gold-bright);\r\n }\r\n\r\n \/* --- AMBIENT EFFECTS --- *\/\r\n .noise-bg {\r\n position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: 0.06;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'\/%3E%3C\/svg%3E\");\r\n animation: noiseShift 0.5s steps(10) infinite;\r\n }\r\n @keyframes noiseShift { 0% { transform: translate(0,0); } 100% { transform: translate(1%, 1%); } }\r\n\r\n \/* SCANLINES: FAINT BACKGROUND *\/\r\n .scanlines {\r\n position: fixed; inset: 0; pointer-events: none; z-index: 50;\r\n background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(212, 175, 55, 0.05) 50%, rgba(212, 175, 55, 0.05)); \r\n background-size: 100% 4px;\r\n animation: scanMove 60s linear infinite;\r\n }\r\n @keyframes scanMove { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }\r\n\r\n \/* --- UI COMPONENTS --- *\/\r\n .os-box {\r\n position: relative;\r\n background-color: var(--obsidian);\r\n border: 1px solid var(--gold-dim);\r\n transition: all 0.3s ease;\r\n box-shadow: 0 0 0 1px var(--void-black);\r\n overflow: hidden; \r\n }\r\n .os-box:hover {\r\n border-color: var(--gold-bright);\r\n box-shadow: 0 0 30px var(--magic-glow);\r\n }\r\n\r\n \/* Custom Scrollbar *\/\r\n ::-webkit-scrollbar { width: 6px; height: 6px; background: var(--void-black); }\r\n ::-webkit-scrollbar-thumb { background: #333; }\r\n ::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }\r\n\r\n \/* Corner Markers *\/\r\n .corner-marker::before, .corner-marker::after, .corner-marker-btm::before, .corner-marker-btm::after {\r\n content: ''; position: absolute; width: 6px; height: 6px;\r\n background: var(--gold-bright);\r\n box-shadow: 0 0 5px var(--gold-bright);\r\n transition: all 0.3s ease;\r\n z-index: 20;\r\n }\r\n .corner-marker::before { top: -3px; left: -3px; transform: rotate(45deg); }\r\n .corner-marker::after { top: -3px; right: -3px; transform: rotate(45deg); }\r\n .corner-marker-btm::before { bottom: -3px; left: -3px; transform: rotate(45deg); }\r\n .corner-marker-btm::after { bottom: -3px; right: -3px; transform: rotate(45deg); }\r\n\r\n \/* HOVER SCANLINE ANIMATION *\/\r\n .scan-line-anim {\r\n position: absolute; top: 0; left: 0; width: 100%; height: 2px;\r\n background: var(--gold-bright);\r\n box-shadow: 0 0 15px var(--gold-bright);\r\n opacity: 0; z-index: 5; pointer-events: none;\r\n }\r\n .os-box:hover .scan-line-anim { opacity: 1; animation: scan 1.5s linear infinite; }\r\n @keyframes scan { 0% { top: 0%; opacity: 0; } 100% { top: 100%; opacity: 0; } }\r\n\r\n \/* Lightbox *\/\r\n #lightbox {\r\n opacity: 0; pointer-events: none; transition: opacity 0.3s ease;\r\n }\r\n #lightbox.active {\r\n opacity: 1; pointer-events: all;\r\n }\r\n \r\n \/* Nav Buttons integrated *\/\r\n .nav-btn-lightbox {\r\n color: var(--gold-dim);\r\n transition: color 0.3s;\r\n padding: 0.5rem;\r\n cursor: pointer;\r\n font-family: 'Orbitron', monospace;\r\n font-size: 1.25rem;\r\n }\r\n .nav-btn-lightbox:hover { color: var(--gold-bright); text-shadow: 0 0 10px var(--gold-bright); }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen flex flex-col p-4 md:p-8 relative\">\r\n\r\n <!-- Ambient Layers -->\r\n <div class=\"fixed inset-0 bg-black z-0\"><\/div>\r\n <div class=\"noise-bg\"><\/div>\r\n <div class=\"scanlines\"><\/div>\r\n\r\n <!-- MAIN CONTAINER -->\r\n <div class=\"w-full max-w-7xl mx-auto flex-grow flex flex-col gap-8 relative z-10 h-full\">\r\n \r\n <!-- TOP NAV: Updated Hyperlink -->\r\n <a href=\"https:\/\/aorphis.com\/home\" class=\"flex items-center gap-2 text-[#7d6519] hover:text-[#d4af37] transition-colors w-max group\">\r\n <i data-lucide=\"arrow-left\" class=\"w-5 h-5 group-hover:-translate-x-1 transition-transform\"><\/i>\r\n <span class=\"font-mono text-xs tracking-widest uppercase\">Return to Main Interface<\/span>\r\n <\/a>\r\n\r\n <!-- SPLIT LAYOUT -->\r\n <div class=\"flex flex-col lg:flex-row gap-8 h-full\">\r\n \r\n <!-- LEFT PANEL: DATA & LOGS -->\r\n <div class=\"w-full lg:w-1\/3 flex flex-col gap-6\">\r\n \r\n <!-- TOP: PROJECT IDENTITY -->\r\n <div class=\"flex flex-col items-center justify-center p-6 border-b border-[#7d6519]\/30\">\r\n \r\n <!-- PROJECT ICON SLOT -->\r\n <div class=\"os-box w-32 h-32 md:w-40 md:h-40 flex items-center justify-center bg-black\/50 mb-4 group relative overflow-hidden\">\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"corner-marker-btm\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/aorphis.com\/wp-content\/uploads\/2026\/01\/AORPHIS_LOGO_2026.png\" \r\n class=\"w-3\/4 h-3\/4 object-contain opacity-80 group-hover:opacity-100 transition-opacity drop-shadow-[0_0_10px_rgba(212,175,55,0.2)]\">\r\n <\/div>\r\n\r\n <div class=\"text-center font-mono space-y-1\">\r\n <div class=\"text-[#d4af37] text-sm tracking-[0.2em] font-bold\">DATE: 12\/03\/2026<\/div>\r\n <div class=\"text-[#7d6519] text-xs tracking-widest\">EXECUTION TIME: 4W 2D 8H<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MIDDLE: MISSION LOG -->\r\n <div class=\"os-box flex-grow min-h-[300px] flex flex-col p-6 bg-[#0a0a0a]\/90\">\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"flex items-center justify-between mb-4 border-b border-[#7d6519]\/30 pb-2\">\r\n <h3 class=\"text-lg font-bold\">MISSION_LOG<\/h3>\r\n <i data-lucide=\"file-text\" class=\"w-4 h-4 text-[#7d6519]\"><\/i>\r\n <\/div>\r\n \r\n <div class=\"overflow-y-auto pr-2 text-sm leading-relaxed text-[#a8a095] font-medium space-y-4 h-full custom-scrollbar\">\r\n <p>\r\n Initial synthesis of the Osiris Protocol is underway. We have successfully mapped the ancient glyphs to a 3D vector space using WebGL.\r\n <\/p>\r\n <p>\r\n <span class=\"text-[#d4af37]\">[UPDATE 01]:<\/span> Texture mapping on the pyramid mesh encountered artifacting. Rerouting power to the render engine.\r\n <\/p>\r\n <p>\r\n <span class=\"text-[#d4af37]\">[UPDATE 02]:<\/span> The client requested \"more doom\". Added dynamic lighting and volumetric fog. Frame rates are stable.\r\n <\/p>\r\n <p>\r\n Awaiting final sign-off on the particle systems. The visual language is now fully aligned with the Necro-Tech aesthetic.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- PROGRESS & COST -->\r\n <div class=\"flex flex-col gap-4\">\r\n \r\n <!-- PROGRESS BAR -->\r\n <!-- Change 'data-progress' to customize -->\r\n <div class=\"progress-container\" data-progress=\"81\">\r\n <div class=\"flex justify-between text-xs font-bold font-mono mb-1 text-[#7d6519] uppercase tracking-wider\">\r\n <span id=\"progress-label\">STATUS_CHECK<\/span>\r\n <span id=\"progress-val\">0%<\/span>\r\n <\/div>\r\n <div class=\"w-full h-3 bg-[#141414] border border-[#7d6519] p-[1px]\">\r\n <div id=\"progress-fill\" class=\"h-full bg-[#d4af37] shadow-[0_0_10px_#d4af37] w-0 transition-all duration-1000 ease-out\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ESTIMATED COST -->\r\n <div class=\"os-box p-3 flex justify-between items-center bg-[#0e0e0e]\">\r\n <span class=\"text-xs text-[#7d6519] font-mono tracking-widest uppercase\">ESTIMATED_COST<\/span>\r\n <span class=\"text-lg text-[#d4af37] font-header font-bold tracking-wider\">500\u20ac<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- RIGHT PANEL: INVENTORY GRID -->\r\n <div class=\"w-full lg:w-2\/3 flex flex-col\">\r\n <div class=\"flex items-center gap-2 mb-4 border-b border-[#7d6519]\/20 pb-2\">\r\n <i data-lucide=\"grid\" class=\"w-5 h-5 text-[#d4af37]\"><\/i>\r\n <h3 class=\"text-xl font-bold tracking-widest\">ASSET_INVENTORY<\/h3>\r\n <\/div>\r\n\r\n <!-- GRID CONTAINER -->\r\n <!-- [INSTRUCTION] Add media here. 'data-type' can be 'image' or 'video'. -->\r\n <div class=\"grid grid-cols-2 md:grid-cols-3 gap-4 auto-rows-min overflow-y-auto max-h-[800px] custom-scrollbar p-1\">\r\n \r\n <!-- SLOT 1 -->\r\n <div class=\"os-box aspect-square relative group cursor-pointer gallery-item\" \r\n data-type=\"image\" \r\n data-src=\"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?q=80&w=1200\"\r\n data-caption=\"Asset_01: Render_Preview\">\r\n <div class=\"scan-line-anim\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?q=80&w=600\" class=\"w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-105\">\r\n <div class=\"absolute bottom-0 right-0 bg-black\/80 text-[#d4af37] text-[10px] px-2 font-mono border-t border-l border-[#d4af37]\">IMG<\/div>\r\n <\/div>\r\n\r\n <!-- SLOT 2 -->\r\n <div class=\"os-box aspect-square relative group cursor-pointer gallery-item\" \r\n data-type=\"image\" \r\n data-src=\"https:\/\/images.unsplash.com\/photo-1550684848-fac1c5b4e853?q=80&w=1200\"\r\n data-caption=\"Asset_02: UI_Concept\">\r\n <div class=\"scan-line-anim\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1550684848-fac1c5b4e853?q=80&w=600\" class=\"w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-105\">\r\n <div class=\"absolute bottom-0 right-0 bg-black\/80 text-[#d4af37] text-[10px] px-2 font-mono border-t border-l border-[#d4af37]\">IMG<\/div>\r\n <\/div>\r\n\r\n <!-- SLOT 3 (Video) -->\r\n <div class=\"os-box aspect-square relative group cursor-pointer gallery-item\" \r\n data-type=\"video\" \r\n data-src=\"https:\/\/assets.mixkit.co\/videos\/preview\/mixkit-digital-animation-of-a-circuit-board-997-large.mp4\"\r\n data-caption=\"Asset_03: Motion_Test\">\r\n <div class=\"scan-line-anim\"><\/div>\r\n <div class=\"absolute inset-0 flex items-center justify-center z-10 pointer-events-none\">\r\n <i data-lucide=\"play-circle\" class=\"w-12 h-12 text-[#d4af37] drop-shadow-md\"><\/i>\r\n <\/div>\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1620641788421-7a1c342ea42e?q=80&w=600\" class=\"w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-105\">\r\n <div class=\"absolute bottom-0 right-0 bg-black\/80 text-[#d4af37] text-[10px] px-2 font-mono border-t border-l border-[#d4af37]\">VID<\/div>\r\n <\/div>\r\n\r\n <!-- SLOT 4 -->\r\n <div class=\"os-box aspect-square relative group cursor-pointer gallery-item\" \r\n data-type=\"image\" \r\n data-src=\"https:\/\/images.unsplash.com\/photo-1478760329108-5c3ed9d495a0?q=80&w=1200\"\r\n data-caption=\"Asset_04: Typography\">\r\n <div class=\"scan-line-anim\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1478760329108-5c3ed9d495a0?q=80&w=600\" class=\"w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-105\">\r\n <div class=\"absolute bottom-0 right-0 bg-black\/80 text-[#d4af37] text-[10px] px-2 font-mono border-t border-l border-[#d4af37]\">IMG<\/div>\r\n <\/div>\r\n\r\n <!-- Empty Slots -->\r\n <div class=\"os-box aspect-square border-dashed border-[#333] flex items-center justify-center opacity-30\">\r\n <i data-lucide=\"plus\" class=\"w-6 h-6 text-[#333]\"><\/i>\r\n <\/div>\r\n <div class=\"os-box aspect-square border-dashed border-[#333] opacity-30\"><\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- FOOTER: RELATED PROJECTS SLIDER -->\r\n <div class=\"w-full border-t border-[#7d6519]\/30 pt-4 pb-8\">\r\n <h4 class=\"text-sm font-bold text-[#7d6519] mb-4 tracking-widest pl-2\">RELATED_ARTIFACTS \/\/<\/h4>\r\n \r\n <div class=\"flex gap-4 overflow-x-auto pb-4 custom-scrollbar snap-x\">\r\n \r\n <!-- NEW SLIDER STYLE: 2:1 Aspect Ratio (Icon + Text) -->\r\n \r\n <!-- Item 1 -->\r\n <a href=\"#\" class=\"group shrink-0 snap-start flex items-center gap-3 pr-4 hover:bg-[#d4af37]\/5 transition-colors p-2 border border-transparent hover:border-[#7d6519]\/30\">\r\n <!-- Left: Icon Slot Style Replica -->\r\n <div class=\"os-box w-16 h-16 relative flex items-center justify-center bg-black\/50 overflow-hidden shrink-0\">\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"corner-marker-btm\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1550684848-fac1c5b4e853?q=80&w=300\" class=\"w-full h-full object-cover object-center opacity-80 group-hover:opacity-100 transition-opacity\">\r\n <\/div>\r\n <!-- Right: Title -->\r\n <div class=\"flex flex-col justify-center w-24\">\r\n <span class=\"text-[#d4af37] font-bold text-xs tracking-wider group-hover:text-white transition-colors truncate\">HERMETIC HUD<\/span>\r\n <span class=\"text-[#7d6519] text-[10px] font-mono\">UI_DESIGN<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Item 2 -->\r\n <a href=\"#\" class=\"group shrink-0 snap-start flex items-center gap-3 pr-4 hover:bg-[#d4af37]\/5 transition-colors p-2 border border-transparent hover:border-[#7d6519]\/30\">\r\n <div class=\"os-box w-16 h-16 relative flex items-center justify-center bg-black\/50 overflow-hidden shrink-0\">\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"corner-marker-btm\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1535156411267-27b23328e129?q=80&w=300\" class=\"w-full h-full object-cover object-center opacity-80 group-hover:opacity-100 transition-opacity\">\r\n <\/div>\r\n <div class=\"flex flex-col justify-center w-24\">\r\n <span class=\"text-[#d4af37] font-bold text-xs tracking-wider group-hover:text-white transition-colors truncate\">SANDSTORM<\/span>\r\n <span class=\"text-[#7d6519] text-[10px] font-mono\">FASHION<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Item 3 -->\r\n <a href=\"#\" class=\"group shrink-0 snap-start flex items-center gap-3 pr-4 hover:bg-[#d4af37]\/5 transition-colors p-2 border border-transparent hover:border-[#7d6519]\/30\">\r\n <div class=\"os-box w-16 h-16 relative flex items-center justify-center bg-black\/50 overflow-hidden shrink-0\">\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"corner-marker-btm\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1620641788421-7a1c342ea42e?q=80&w=300\" class=\"w-full h-full object-cover object-center opacity-80 group-hover:opacity-100 transition-opacity\">\r\n <\/div>\r\n <div class=\"flex flex-col justify-center w-24\">\r\n <span class=\"text-[#d4af37] font-bold text-xs tracking-wider group-hover:text-white transition-colors truncate\">VOID RUNNER<\/span>\r\n <span class=\"text-[#7d6519] text-[10px] font-mono\">MOTION<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Item 4 -->\r\n <a href=\"#\" class=\"group shrink-0 snap-start flex items-center gap-3 pr-4 hover:bg-[#d4af37]\/5 transition-colors p-2 border border-transparent hover:border-[#7d6519]\/30\">\r\n <div class=\"os-box w-16 h-16 relative flex items-center justify-center bg-black\/50 overflow-hidden shrink-0\">\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"corner-marker-btm\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1478760329108-5c3ed9d495a0?q=80&w=300\" class=\"w-full h-full object-cover object-center opacity-80 group-hover:opacity-100 transition-opacity\">\r\n <\/div>\r\n <div class=\"flex flex-col justify-center w-24\">\r\n <span class=\"text-[#d4af37] font-bold text-xs tracking-wider group-hover:text-white transition-colors truncate\">NEO-GLYPHS<\/span>\r\n <span class=\"text-[#7d6519] text-[10px] font-mono\">TYPOGRAPHY<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- LIGHTBOX MODAL -->\r\n <div id=\"lightbox\" class=\"fixed inset-0 z-[100] flex items-center justify-center bg-black\/90 backdrop-blur-sm p-4\">\r\n \r\n <div class=\"os-box w-full max-w-5xl max-h-[90vh] flex flex-col bg-[#050505] shadow-[0_0_50px_rgba(0,0,0,0.9)] relative\">\r\n \r\n <button id=\"lightbox-close\" class=\"absolute -top-10 right-0 text-[#d4af37] hover:text-white font-mono text-xl\">[X]<\/button>\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"corner-marker-btm\"><\/div>\r\n \r\n <!-- Content Container -->\r\n <div id=\"lightbox-content\" class=\"flex-grow flex items-center justify-center p-2 bg-black overflow-hidden relative min-h-[50vh]\">\r\n <!-- Img\/Video injected here -->\r\n <\/div>\r\n \r\n <!-- Footer: Caption + Nav -->\r\n <div class=\"p-4 border-t border-[#7d6519] bg-[#0a0a0a] flex flex-col md:flex-row justify-between items-center gap-4\">\r\n <h3 id=\"lightbox-caption\" class=\"text-[#d4af37] font-header text-lg\">ASSET_NAME<\/h3>\r\n \r\n <!-- Nav Integrated into Window Footer -->\r\n <div class=\"flex items-center gap-6 select-none\">\r\n <button id=\"lightbox-prev\" class=\"nav-btn-lightbox\">[<]<\/button>\r\n <span id=\"lightbox-counter\" class=\"text-[#7d6519] font-mono text-xs\">1 \/ 4<\/span>\r\n <button id=\"lightbox-next\" class=\"nav-btn-lightbox\">[>]<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n lucide.createIcons();\r\n\r\n \/\/ 1. PROGRESS BAR LOGIC\r\n const progressContainer = document.querySelector('.progress-container');\r\n const progressFill = document.getElementById('progress-fill');\r\n const progressVal = document.getElementById('progress-val');\r\n const progressLabel = document.getElementById('progress-label');\r\n const percentage = parseInt(progressContainer.getAttribute('data-progress'));\r\n\r\n setTimeout(() => {\r\n progressFill.style.width = `${percentage}%`;\r\n progressVal.innerText = `${percentage}%`;\r\n if (percentage >= 100) {\r\n progressLabel.innerText = \"COMPLETED\";\r\n progressLabel.classList.add('text-[#d4af37]');\r\n } else {\r\n progressLabel.innerText = \"IN PROGRESS\";\r\n }\r\n }, 500);\r\n\r\n \/\/ 2. LIGHTBOX LOGIC\r\n \/\/ Convert NodeList to Array for indexing\r\n const galleryItems = Array.from(document.querySelectorAll('.gallery-item'));\r\n const lightbox = document.getElementById('lightbox');\r\n const lightboxContent = document.getElementById('lightbox-content');\r\n const lightboxCaption = document.getElementById('lightbox-caption');\r\n const lightboxCounter = document.getElementById('lightbox-counter');\r\n const closeBtn = document.getElementById('lightbox-close');\r\n const prevBtn = document.getElementById('lightbox-prev');\r\n const nextBtn = document.getElementById('lightbox-next');\r\n \r\n let currentIndex = 0;\r\n\r\n function openLightbox(index) {\r\n currentIndex = index;\r\n const item = galleryItems[currentIndex];\r\n const type = item.getAttribute('data-type');\r\n const src = item.getAttribute('data-src');\r\n const caption = item.getAttribute('data-caption');\r\n\r\n lightboxContent.innerHTML = ''; \r\n\r\n if (type === 'image') {\r\n const img = document.createElement('img');\r\n img.src = src;\r\n img.className = \"max-w-full max-h-[80vh] object-contain border border-[#333]\";\r\n lightboxContent.appendChild(img);\r\n } else if (type === 'video') {\r\n const video = document.createElement('video');\r\n video.src = src;\r\n video.controls = true;\r\n video.autoplay = true;\r\n video.className = \"max-w-full max-h-[80vh] border border-[#333]\";\r\n lightboxContent.appendChild(video);\r\n }\r\n\r\n lightboxCaption.innerText = caption;\r\n lightboxCounter.innerText = `${currentIndex + 1} \/ ${galleryItems.length}`;\r\n lightbox.classList.add('active');\r\n }\r\n\r\n function closeLightbox() {\r\n lightbox.classList.remove('active');\r\n setTimeout(() => { lightboxContent.innerHTML = ''; }, 300);\r\n }\r\n\r\n function nextImage() {\r\n let nextIndex = currentIndex + 1;\r\n if (nextIndex >= galleryItems.length) nextIndex = 0;\r\n openLightbox(nextIndex);\r\n }\r\n\r\n function prevImage() {\r\n let prevIndex = currentIndex - 1;\r\n if (prevIndex < 0) prevIndex = galleryItems.length - 1;\r\n openLightbox(prevIndex);\r\n }\r\n\r\n \/\/ SWIPE SUPPORT\r\n let touchStartX = 0;\r\n let touchEndX = 0;\r\n\r\n lightbox.addEventListener('touchstart', (e) => {\r\n touchStartX = e.changedTouches[0].screenX;\r\n }, {passive: true});\r\n\r\n lightbox.addEventListener('touchend', (e) => {\r\n touchEndX = e.changedTouches[0].screenX;\r\n handleSwipe();\r\n }, {passive: true});\r\n\r\n function handleSwipe() {\r\n const threshold = 50; \r\n if (touchEndX < touchStartX - threshold) {\r\n nextImage(); \/\/ Swipe Left -> Next\r\n }\r\n if (touchEndX > touchStartX + threshold) {\r\n prevImage(); \/\/ Swipe Right -> Prev\r\n }\r\n }\r\n\r\n \/\/ Event Listeners\r\n galleryItems.forEach((item, index) => {\r\n item.addEventListener('click', () => openLightbox(index));\r\n });\r\n\r\n closeBtn.addEventListener('click', closeLightbox);\r\n nextBtn.addEventListener('click', (e) => { e.stopPropagation(); nextImage(); });\r\n prevBtn.addEventListener('click', (e) => { e.stopPropagation(); prevImage(); });\r\n\r\n lightbox.addEventListener('click', (e) => {\r\n if (e.target === lightbox || e.target.id === 'lightbox-content') {\r\n closeLightbox();\r\n }\r\n });\r\n\r\n \/\/ Keyboard Navigation\r\n document.addEventListener('keydown', (e) => {\r\n if (!lightbox.classList.contains('active')) return;\r\n if (e.key === 'Escape') closeLightbox();\r\n if (e.key === 'ArrowRight') nextImage();\r\n if (e.key === 'ArrowLeft') prevImage();\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PROJECT \/\/ OSIRIS_PROTOCOL<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-65","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/pages\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":0,"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/pages\/65\/revisions"}],"wp:attachment":[{"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/media?parent=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}