Encountered a syntax error while rendering template: check <% content_for :title, "APPEX360 Complete Workflow Demonstration" %> <% content_for :full_width, true %> <% content_for :hide_header, true %> <style> * { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',system-ui,sans-serif; } body { background:#0b0d17; overflow:hidden; height:100vh; color:#fff; } .wt-container { display:flex; height:100vh; } .wt-sidebar { width:200px; background:rgba(15,15,26,0.95); border-right:1px solid rgba(255,255,255,0.06); padding:12px; overflow-y:auto; flex-shrink:0; z-index:10; } .wt-sidebar::-webkit-scrollbar { width:3px; } .wt-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; } .wt-preview { flex:1; position:relative; background:#0b0d17; overflow:hidden; } .wt-preview iframe { width:100%; height:100%; border:none; pointer-events:none; } .wt-scene { padding:6px 8px; border-radius:6px; cursor:pointer; font-size:10px; color:rgba(255,255,255,0.35); transition:all 0.15s; margin-bottom:1px; display:flex; align-items:center; gap:6px; } .wt-scene:hover { background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.6); } .wt-scene.active { background:rgba(99,102,241,0.08); color:#818cf8; font-weight:600; border-left:2px solid #818cf8; } .wt-scene.done { color:rgba(52,211,153,0.6); } .wt-scene-num { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; flex-shrink:0; background:rgba(255,255,255,0.04); } .wt-scene.active .wt-scene-num { background:rgba(99,102,241,0.15); color:#818cf8; } .wt-scene.done .wt-scene-num { background:rgba(52,211,153,0.1); color:rgba(52,211,153,0.6); } .wt-overlay { position:absolute; bottom:0; left:0; right:0; padding:16px 20px; background:linear-gradient(transparent,rgba(11,13,23,0.92)); z-index:20; } .wt-title { font-size:14px; font-weight:700; margin-bottom:2px; } .wt-desc { font-size:11px; color:rgba(255,255,255,0.45); max-width:550px; line-height:1.4; } .wt-nav { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; } .wt-btn { padding:6px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); color:#fff; font-size:11px; font-weight:600; cursor:pointer; transition:all 0.15s; text-decoration:none; } .wt-btn:hover { background:rgba(99,102,241,0.12); border-color:rgba(99,102,241,0.3); } .wt-btn.primary { background:#6366f1; border-color:#6366f1; } .wt-btn.primary:hover { background:#5558e6; } /* Cursor */ .wt-cursor { position:fixed; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.1); border:2px solid rgba(255,255,255,0.3); transform:translate(-50%,-50%); transition:all 0.35s cubic-bezier(0.25,0.46,0.45,0.94); display:none; z-index:9999; pointer-events:none; } .wt-cursor::after { content:''; position:absolute; top:3px; left:3px; width:5px; height:5px; border-radius:50%; background:#fff; } .wt-cursor.clicking { transform:translate(-50%,-50%) scale(0.6); background:rgba(99,102,241,0.25); border-color:#818cf8; } .wt-cursor.hovering { transform:translate(-50%,-50%) scale(1.25); background:rgba(99,102,241,0.1); border-color:rgba(99,102,241,0.5); } .click-flash { position:fixed; width:36px; height:36px; border-radius:50%; background:rgba(99,102,241,0.15); border:2px solid rgba(99,102,241,0.3); transform:translate(-50%,-50%) scale(0); animation:clickFlash 0.4s ease forwards; pointer-events:none; z-index:9999; } @keyframes clickFlash { 0%{transform:translate(-50%,-50%) scale(0);opacity:1} 100%{transform:translate(-50%,-50%) scale(1.8);opacity:0} } /* Full-screen overlay scenes */ .full-overlay { position:absolute; top:0; left:0; right:0; bottom:0; z-index:15; display:none; overflow-y:auto; } .full-overlay.active { display:block; } .diagnose-card { border-radius:10px; padding:14px 16px; text-align:center; border:1px solid rgba(255,255,255,0.06); } .diagnose-card .value { font-size:28px; font-weight:900; letter-spacing:-0.02em; } .diagnose-card .label { font-size:10px; color:rgba(255,255,255,0.35); text-transform:uppercase; margin-top:2px; } .domain-item { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:6px; font-size:11px; margin-bottom:3px; } .reasoning-line { padding:8px 12px; border-radius:6px; font-size:11px; color:rgba(255,255,255,0.6); border-left:2px solid rgba(99,102,241,0.3); margin-bottom:4px; background:rgba(99,102,241,0.02); } .typing-cursor { display:inline-block; width:2px; height:14px; background:#818cf8; animation:blink 0.8s step-end infinite; vertical-align:text-bottom; margin-left:1px; } @keyframes blink { 50%{opacity:0} } .result-card { padding:12px; border-radius:8px; text-align:center; min-width:0; } .result-card .num { font-size:22px; font-weight:900; letter-spacing:-0.03em; } .result-card .lbl { font-size:9px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-top:2px; } .cat-badge { display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:9px;font-weight:600; } .wt-progress { height:2px; background:rgba(255,255,255,0.04); border-radius:2px; margin:8px 0; } /* Responsiveness */ @media (max-width: 768px) { .wt-container { flex-direction: column; } .wt-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); } .wt-preview { height: 40vh; } .tour-slide { padding: 30px 20px; } .full-overlay { padding: 20px !important; } } </style> <% scenes = [ { id: 'oigp', title: 'APPEX360 Category', path: '/why_appex360_is_different', desc: '' }, { id: 'problem', title: 'The Problem', path: '/why_appex360_is_different', desc: '' }, { id: 'diagnose', title: 'Diagnose Engine', path: '/diagnose', desc: '' }, { id: 'boardroom', title: 'Boardroom', path: '/boardroom', desc: '' }, { id: 'skill', title: 'Skill Matrix', path: '/technical_capability', desc: '' }, { id: 'close', title: 'Get Started', path: '/pricing', desc: '' }, ] %} <div class="wt-container"> <div class="wt-sidebar"> <div style="font-size:11px;font-weight:800;color:#fff;margin-bottom:8px;display:flex;align-items:center;gap:6px;"> <span style="width:4px;height:4px;border-radius:50%;background:#818cf8;"></span> APPEX360 </div> <div class="wt-progress"><div class="wt-progress-bar" id="progress-bar" style="width:0%"></div></div> <div style="font-size:8px;color:rgba(255,255,255,0.2);margin-bottom:6px;"><span id="scene-counter">1</span>/<%= scenes.length %></div> <div style="font-size:7px;color:#fbbf24;margin-bottom:8px;padding:3px 6px;border-radius:4px;background:rgba(251,191,36,0.06);border:1px solid rgba(251,191,36,0.1);display:inline-block;"> <i class="fas fa-flask" style="margin-right:3px;"></i> ILLUSTRATIVE EXAMPLE </div> <% scenes.each_with_index do |scene, i| %> <div class="wt-scene <%= 'active' if i == 0 %>" onclick="goScene(<%= i %>)"> <span class="wt-scene-num"><%= i + 1 %></span> <span><%= scene[:title] %></span> </div> <% end %> </div> <div class="wt-preview" id="preview-panel"> <iframe id="scene-frame" src="/why_appex360_is_different" loading="lazy"></iframe> <div class="wt-cursor" id="wt-cursor"></div> <!-- SCENE 1: OIGP Category — OPENING TITLE CARD --> <div class="full-overlay active" id="overlay-oigp" style="background:rgba(11,13,23,0.96);padding:40px;"> <div style="max-width:800px;margin:40px auto;text-align:center;"> <div style="font-size:10px;font-weight:700;color:#818cf8;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:16px;"> <i class="fas fa-play-circle mr-1.5"></i> Welcome to the APPEX360 Tour </div> <div style="font-size:36px;font-weight:900;color:#fff;margin-bottom:24px;letter-spacing:-0.03em;"> Why <span style="background:linear-gradient(135deg,#818cf8,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">APPEX360</span> Exists </div> <div style="display:flex;justify-content:center;gap:12px;margin-bottom:32px;"> <% [ { name: 'CMMS', role: 'Execution', icon: 'fa-wrench', color: '#f59e0b' }, { name: 'ERP', role: 'Transactions', icon: 'fa-file-invoice', color: '#10b981' }, { name: 'MES', role: 'Production', icon: 'fa-industry', color: '#06b6d4' }, { name: 'SCADA', role: 'Monitoring', icon: 'fa-desktop', color: '#8b5cf6' }, { name: 'HR', role: 'Workforce', icon: 'fa-users', color: '#f472b6' } ].each do |item| %> <div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:16px;width:120px;text-align:center;"> <i class="fas <%= item[:icon] %>" style="font-size:18px;color:<%= item[:color] %>;margin-bottom:8px;display:block;"></i> <div style="font-size:11px;font-weight:700;color:#fff;"><%= item[:name] %></div> <div style="font-size:9px;color:<%= item[:color] %>;text-transform:uppercase;letter-spacing:0.04em;margin-top:2px;"><%= item[:role] %></div> </div> <% end %> </div> <div style="font-size:24px;margin-bottom:16px;color:rgba(255,255,255,0.3);">↓</div> <div style="background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(167,139,250,0.05));border:2px solid #6366f1;border-radius:16px;padding:24px;margin-bottom:24px;"> <div style="font-size:24px;font-weight:900;color:#fff;margin-bottom:8px;">APPEX360</div> <div style="font-size:14px;font-weight:700;color:#818cf8;text-transform:uppercase;letter-spacing:0.06em;">Operational Intelligence & Governance Platform</div> </div> <p style="font-size:15px;color:rgba(255,255,255,0.7);line-height:1.6;max-width:600px;margin:0 auto;margin-bottom:24px;"> "Most organisations already have systems that collect data. The challenge is that these systems operate independently and do not connect the dots. APPEX360 sits above operational systems and transforms fragmented information into <strong style="color:#fff;">executive intelligence</strong>." </p> <div style="margin-top:20px;"> <button onclick="nextScene()" class="wt-btn primary" style="padding:12px 32px;font-size:14px;border-radius:12px;">See APPEX360 in Action →</button> </div> </div> </div> <!-- SCENE 2: The Problem --> <div class="full-overlay" id="overlay-problem" style="background:rgba(11,13,23,0.94);padding:40px;"> <div style="max-width:650px;margin:40px auto;"> <div style="font-size:10px;font-weight:700;color:rgba(255,255,255,0.25);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px;">Illustrative Operational Challenge</div> <div style="background:rgba(245,158,11,0.04);border:1px solid rgba(245,158,11,0.12);border-radius:10px;padding:20px;margin-bottom:20px;"> <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;"> <i class="fas fa-industry" style="color:#f59e0b;font-size:16px;"></i> <span style="font-size:13px;font-weight:700;color:#fff;">Sample Plant (Illustrative)</span> </div> <div id="problem-text" style="font-size:12px;color:rgba(255,255,255,0.65);line-height:1.7;"></div> </div> <div id="problem-contradictions" style="display:none;margin-bottom:16px;"></div> <div id="problem-cta" style="display:none;text-align:center;"> <button onclick="nextScene()" class="wt-btn primary" style="font-size:12px;padding:8px 24px;">Diagnose This Problem →</button> </div> </div> </div> <!-- SCENE 3: Diagnose Engine --> <div class="full-overlay" id="overlay-diagnose" style="background:rgba(11,13,23,0.94);padding:32px 40px;"> <div style="max-width:700px;margin:20px auto;"> <div style="font-size:10px;font-weight:700;color:rgba(255,255,255,0.25);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:16px;">🔍 Diagnose Engine — Cross-Domain Analysis</div> <!-- Search box simulation --> <div id="diag-search" style="margin-bottom:16px;"> <div style="display:flex;gap:8px;align-items:center;margin-bottom:8px;"> <div style="flex:1;padding:10px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.02);font-size:12px;color:rgba(255,255,255,0.4);" id="diag-input">Type your operational challenge...</div> <button id="diag-btn" style="padding:10px 20px;border-radius:8px;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);color:#818cf8;font-size:11px;font-weight:700;cursor:pointer;opacity:0.4;">Diagnose</button> </div> </div> <!-- Domain analysis --> <div id="diag-domains" style="display:none;margin-bottom:12px;"> <div style="font-size:11px;font-weight:600;color:rgba(255,255,255,0.4);margin-bottom:6px;">APPEX360 analysing across <span id="domain-count">6</span> operational domains...</div> <div id="domain-list"></div> </div> <!-- Reasoning --> <div id="diag-reasoning" style="display:none;margin-bottom:12px;"></div> <!-- Results --> <div id="diag-results" style="display:none;"> <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px;"> <div class="result-card" style="background:rgba(239,68,68,0.06);border:1px solid rgba(239,68,68,0.15);"><div class="num" style="color:#ef4444;">$1.8M</div><div class="lbl">Financial Exposure</div></div> <div class="result-card" style="background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.15);"><div class="num" style="color:#f59e0b;">87%</div><div class="lbl">Root Cause Confidence</div></div> <div class="result-card" style="background:rgba(167,139,250,0.06);border:1px solid rgba(167,139,250,0.15);"><div class="num" style="color:#a78bfa;">High</div><div class="lbl">Workforce Risk</div></div> <div class="result-card" style="background:rgba(6,182,212,0.06);border:1px solid rgba(6,182,212,0.15);"><div class="num" style="color:#06b6d4;">6</div><div class="lbl">Contradictions</div></div> <div class="result-card" style="background:rgba(52,211,153,0.06);border:1px solid rgba(52,211,153,0.15);"><div class="num" style="color:#34d399;">$2.4M</div><div class="lbl">Opportunity</div></div> <div class="result-card" style="background:rgba(99,102,241,0.06);border:1px solid rgba(99,102,241,0.15);"><div class="num" style="color:#818cf8;">8</div><div class="lbl">Actions</div></div> </div> <div style="display:flex;gap:6px;flex-wrap:wrap;justify-content:center;"> <span class="cat-badge" style="background:rgba(239,68,68,0.08);color:#ef4444;border:1px solid rgba(239,68,68,0.12);">⚙ Root Cause: Planning & Scheduling</span> <span class="cat-badge" style="background:rgba(245,158,11,0.08);color:#f59e0b;border:1px solid rgba(245,158,11,0.12);">👥 SPOF: 3 Critical Roles</span> <span class="cat-badge" style="background:rgba(6,182,212,0.08);color:#06b6d4;border:1px solid rgba(6,182,212,0.12);">📊 Governance: KPI Validation Missing</span> </div> <div style="text-align:center;margin-top:12px;"> <button onclick="nextScene()" class="wt-btn primary" style="font-size:11px;padding:7px 18px;">Generate Boardroom Report →</button> </div> </div> </div> </div> <!-- SCENE 4: Boardroom --> <div class="full-overlay" id="overlay-boardroom" style="background:rgba(11,13,23,0.94);padding:40px;"> <div style="max-width:650px;margin:30px auto;"> <div style="font-size:10px;font-weight:700;color:rgba(255,255,255,0.25);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:16px;">📋 Boardroom Intelligence Pack</div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;"> <div style="padding:16px;border-radius:10px;background:rgba(239,68,68,0.04);border:1px solid rgba(239,68,68,0.1);text-align:center;"> <div style="font-size:9px;color:rgba(255,255,255,0.3);text-transform:uppercase;">Financial Exposure</div> <div style="font-size:32px;font-weight:900;color:#ef4444;">$8.7M</div> </div> <div style="padding:16px;border-radius:10px;background:rgba(52,211,153,0.04);border:1px solid rgba(52,211,153,0.1);text-align:center;"> <div style="font-size:9px;color:rgba(255,255,255,0.3);text-transform:uppercase;">Benefits Opportunity</div> <div style="font-size:32px;font-weight:900;color:#34d399;">$6.4M</div> </div> <div style="padding:16px;border-radius:10px;background:rgba(99,102,241,0.04);border:1px solid rgba(99,102,241,0.1);text-align:center;"> <div style="font-size:9px;color:rgba(255,255,255,0.3);text-transform:uppercase;">Executive Actions</div> <div style="font-size:32px;font-weight:900;color:#818cf8;">12</div> </div> <div style="padding:16px;border-radius:10px;background:rgba(245,158,11,0.04);border:1px solid rgba(245,158,11,0.1);text-align:center;"> <div style="font-size:9px;color:rgba(255,255,255,0.3);text-transform:uppercase;">Avg Confidence</div> <div style="font-size:32px;font-weight:900;color:#f59e0b;">82%</div> </div> </div> <div style="padding:12px;border-radius:8px;background:rgba(99,102,241,0.03);border:1px solid rgba(99,102,241,0.08);margin-bottom:12px;"> <div style="font-size:11px;font-weight:600;color:#fff;margin-bottom:6px;">Executive Summary</div> <div style="font-size:10px;color:rgba(255,255,255,0.5);line-height:1.6;">A sample manufacturing plant faces significant operational risk exposure across maintenance, workforce and inventory domains. APPEX360 identifies contradictions between reported and actual performance. The platform surfaces root causes, recommends executive actions, and quantifies benefit opportunities — all with traceable confidence scores.</div> </div> <div style="display:flex;gap:6px;justify-content:center;"> <span class="cat-badge" style="background:rgba(239,68,68,0.06);color:#ef4444;border:1px solid rgba(239,68,68,0.1);"><i class="fas fa-file-pdf"></i> Export PDF</span> <span class="cat-badge" style="background:rgba(52,211,153,0.06);color:#34d399;border:1px solid rgba(52,211,153,0.1);"><i class="fas fa-print"></i> Board Pack</span> <span class="cat-badge" style="background:rgba(99,102,241,0.06);color:#818cf8;border:1px solid rgba(99,102,241,0.1);"><i class="fas fa-chart-bar"></i> Skill Matrix</span> </div> <div style="text-align:center;margin-top:14px;"> <button onclick="nextScene()" class="wt-btn primary" style="font-size:11px;padding:7px 18px;">View Skill Matrix →</button> </div> </div> </div> <!-- SCENE 5: Skill Matrix --> <div class="full-overlay" id="overlay-skill" style="background:rgba(11,13,23,0.94);padding:40px;"> <div style="max-width:650px;margin:30px auto;text-align:center;"> <div style="font-size:10px;font-weight:700;color:rgba(255,255,255,0.25);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:16px;">🛠 Technical Capability — Skill Matrix</div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;"> <div style="padding:14px;border-radius:8px;background:rgba(52,211,153,0.04);border:1px solid rgba(52,211,153,0.1);"> <div style="font-size:11px;color:rgba(255,255,255,0.35);">Capability Score</div> <div style="font-size:28px;font-weight:900;color:#34d399;">68%</div> </div> <div style="padding:14px;border-radius:8px;background:rgba(239,68,68,0.04);border:1px solid rgba(239,68,68,0.1);"> <div style="font-size:11px;color:rgba(255,255,255,0.35);">Critical Gaps</div> <div style="font-size:28px;font-weight:900;color:#ef4444;">7</div> </div> <div style="padding:14px;border-radius:8px;background:rgba(245,158,11,0.04);border:1px solid rgba(245,158,11,0.1);"> <div style="font-size:11px;color:rgba(255,255,255,0.35);">SPOF Roles</div> <div style="font-size:28px;font-weight:900;color:#f59e0b;">3</div> </div> <div style="padding:14px;border-radius:8px;background:rgba(99,102,241,0.04);border:1px solid rgba(99,102,241,0.1);"> <div style="font-size:11px;color:rgba(255,255,255,0.35);">Training Priority</div> <div style="font-size:28px;font-weight:900;color:#818cf8;">High</div> </div> </div> <div style="text-align:center;"><button onclick="nextScene()" class="wt-btn primary" style="font-size:11px;padding:7px 18px;">See Pricing &amp; Get Started →</button></div> </div> </div> <!-- Overlay <div class="wt-overlay" id="scene-overlay"> <div class="wt-title" id="scene-title"></div> <div class="wt-desc" id="scene-desc"></div> <div class="wt-nav" id="scene-nav"> <button onclick="prevScene()" class="wt-btn" id="prev-btn" style="display:none;">← Back</button> <button onclick="nextScene()" class="wt-btn primary" id="next-btn">Next →</button> </div> </div>--> </div> </div> <script> var scenes = <%= raw scenes.map { |s| { id: s[:id], title: s[:title], path: s[:path] } }.to_json %>; var currentScene = 0; var autoTimer = null; var cursorEl = document.getElementById('wt-cursor'); function showOverlay(id) { document.querySelectorAll('.full-overlay').forEach(function(o){o.classList.remove('active')}); var el = document.getElementById('overlay-'+id); if(el) el.classList.add('active'); } function hideAllOverlays() { document.querySelectorAll('.full-overlay').forEach(function(o){o.classList.remove('active')}); } function loadScene(n) { var scene = scenes[n]; document.getElementById('scene-frame').src = scene.path; document.getElementById('scene-counter').textContent = n + 1; document.getElementById('progress-bar').style.width = ((n + 1) / scenes.length * 100) + '%'; document.querySelectorAll('.wt-scene').forEach(function(el, i) { el.classList.toggle('active', i === n); el.classList.toggle('done', i < n); }); currentScene = n; showOverlay(scene.id); resetAutoTimer(); if (scene.id === 'problem') runProblemScene(); if (scene.id === 'diagnose') runDiagnoseScene(); } function nextScene() { if (currentScene < scenes.length - 1) loadScene(currentScene + 1); } function prevScene() { if (currentScene > 0) loadScene(currentScene - 1); } function goScene(n) { loadScene(n); } // ── PROBLEM SCENE ── function runProblemScene() { var text = "Our PM compliance is above 92% across the site, however breakdowns have increased 18%. Maintenance overtime has reduced by 25%, but contractor expenditure has increased 40%. Training compliance exceeds 95%, however technical capability assessments show significant skill gaps. Inventory value has increased by $1.2M, yet critical spare stockouts continue. Production OEE has fallen from 82% to 74%, while maintenance expenditure has increased 15%. Management believes maintenance performance is improving, but reliability continues to decline."; var el = document.getElementById('problem-text'); el.innerHTML = ''; var i = 0; function type() { if (i < text.length) { el.innerHTML = text.substring(0, i+1) + '<span class="typing-cursor"></span>'; i++; setTimeout(type, 12); } else { setTimeout(function() { document.getElementById('problem-contradictions').style.display = 'block'; document.getElementById('problem-contradictions').innerHTML = '<div style="font-size:11px;font-weight:600;color:rgba(255,255,255,0.4);margin-bottom:6px;">Key Contradictions Detected:</div>' + ['PM compliance ↑ but breakdowns ↑','Overtime ↓ but contractor spend ↑','Training ↑ but skill gaps exist','Inventory ↑ but stockouts continue','OEE ↓ while maintenance spend ↑'].map(function(c){return '<div style="display:flex;align-items:center;gap:6px;padding:5px 10px;margin-bottom:3px;border-radius:6px;background:rgba(245,158,11,0.04);border:1px solid rgba(245,158,11,0.1);font-size:11px;color:rgba(255,255,255,0.55);"><i class="fas fa-exclamation-triangle" style="color:#f59e0b;font-size:10px;"></i>'+c+'</div>';}).join(''); document.getElementById('problem-cta').style.display = 'block'; }, 400); } } type(); } // ── DIAGNOSE SCENE ── function runDiagnoseScene() { var inputEl = document.getElementById('diag-input'); var btnEl = document.getElementById('diag-btn'); var text = "Our PM compliance is above 92% across the site, however breakdowns have increased 18%..."; // Phase 1: Type into input box inputEl.innerHTML = ''; inputEl.style.color = 'rgba(255,255,255,0.8)'; var i = 0; function typeInto() { if (i < text.length) { inputEl.innerHTML = text.substring(0, i+1) + '<span class="typing-cursor"></span>'; i++; setTimeout(typeInto, 20); } else { // Enable button btnEl.style.opacity = '1'; btnEl.style.cursor = 'pointer'; // Move cursor to button and click setTimeout(function() { var rect = btnEl.getBoundingClientRect(); cursorEl.style.display = 'block'; cursorEl.style.left = (rect.left + rect.width/2) + 'px'; cursorEl.style.top = (rect.top + rect.height/2) + 'px'; cursorEl.classList.add('hovering'); setTimeout(function() { cursorEl.classList.remove('hovering'); cursorEl.classList.add('clicking'); var flash = document.createElement('div'); flash.className = 'click-flash'; flash.style.left = (rect.left + rect.width/2) + 'px'; flash.style.top = (rect.top + rect.height/2) + 'px'; document.body.appendChild(flash); setTimeout(function(){flash.remove()},400); setTimeout(function() { cursorEl.classList.remove('clicking'); cursorEl.style.display = 'none'; btnEl.style.background = 'rgba(99,102,241,0.2)'; btnEl.innerHTML = 'Analysing... <i class="fas fa-spinner fa-spin"></i>'; runDomainAnalysis(); }, 300); }, 1200); }, 500); } } typeInto(); } function runDomainAnalysis() { document.getElementById('diag-domains').style.display = 'block'; var list = document.getElementById('domain-list'); var domains = [ { name: 'Maintenance Domain', icon: 'fa-wrench', color: '#f59e0b' }, { name: 'Workforce Domain', icon: 'fa-users', color: '#a78bfa' }, { name: 'Financial Domain', icon: 'fa-dollar-sign', color: '#34d399' }, { name: 'Reliability Domain', icon: 'fa-shield-alt', color: '#06b6d4' }, { name: 'Governance Domain', icon: 'fa-gavel', color: '#818cf8' }, { name: 'Operational Domain', icon: 'fa-industry', color: '#6366f1' }, ]; list.innerHTML = ''; var d = 0; function addDomain() { if (d < domains.length) { var dom = domains[d]; list.innerHTML += '<div class="domain-item" style="background:rgba('+ (d<3?'99,102,241':'255,255,255') +',0.02);border:1px solid rgba(255,255,255,0.04);opacity:0;transition:all 0.3s;">' + '<i class="fas ' + dom.icon + '" style="color:' + dom.color + ';width:16px;"></i>' + '<span style="flex:1;color:rgba(255,255,255,0.6);">' + dom.name + '</span>' + '<span style="color:#34d399;font-size:10px;"><i class="fas fa-check-circle"></i> ✓</span></div>'; var items = list.querySelectorAll('.domain-item'); setTimeout(function(){items[items.length-1].style.opacity = '1';}, 50); d++; setTimeout(addDomain, 600); } else { // Show reasoning setTimeout(function() { document.getElementById('diag-domains').style.display = 'none'; var r = document.getElementById('diag-reasoning'); r.style.display = 'block'; btnEl = document.getElementById('diag-btn'); btnEl.innerHTML = '<i class="fas fa-check-circle" style="color:#34d399;"></i> Complete'; btnEl.style.background = 'rgba(52,211,153,0.1)'; var steps = ['🔍 6 contradictions detected across maintenance, workforce and financial domains','📊 Primary root cause: Planning & Scheduling effectiveness (87% confidence)','💰 Financial exposure: $1.8M across reactive maintenance and excess inventory','👥 Workforce risk: 3 single points of failure identified in critical roles','📋 8 recommended actions with estimated $2.4M annual benefit opportunity']; var si = 0; function showStep() { if (si < steps.length) { r.innerHTML += '<div class="reasoning-line" style="opacity:0;transition:all 0.3s;">'+steps[si]+'</div>'; var lines = r.querySelectorAll('.reasoning-line'); setTimeout(function(){lines[lines.length-1].style.opacity = '1';}, 100); si++; setTimeout(showStep, 700); } else { setTimeout(function(){ document.getElementById('diag-results').style.display = 'block'; }, 500); } } showStep(); }, 500); } } addDomain(); } function resetAutoTimer() { if (autoTimer) clearInterval(autoTimer); if (currentScene < scenes.length - 1) { autoTimer = setInterval(function() { if (currentScene < scenes.length - 1) loadScene(currentScene + 1); else clearInterval(autoTimer); }, 120000); } } document.addEventListener('keydown', function(e) { if (e.key === 'ArrowRight') nextScene(); if (e.key === 'ArrowLeft') prevScene(); }); loadScene(0); </script>