Keyura ×

Email Password

Forgot password?

Login

Don't have an account? Sign Up

First Name Last Name

Email

Password Confirm Password

Create Account

By creating an account you agree to our Terms and Privacy Policy.

Already have an account? Login

'); win.document.close(); } else { alert('Could not save image. Please try again or check browser permissions.'); } } catch(e2) { alert('Could not save image. Please try again.'); } } } function shareSnap(){ if(!snapData) { dlSnap(); return; } // Check if Web Share API is available and supports files if (navigator.share && typeof navigator.canShare === 'function') { try { // Convert data URL to blob var parts = snapData.split(','); if (parts.length !== 2) throw new Error('Invalid data URL'); var byteString = atob(parts[1]); var mimeString = parts[0].split(':')[1].split(';')[0]; var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) ia[i] = byteString.charCodeAt(i); var blob = new Blob([ab], {type: mimeString}); // Create file with unique name var fileName = 'keyura-tryon-' + new Date().getTime() + '.jpg'; var file = new File([blob], fileName, {type: 'image/jpeg'}); // Check if file can be shared try { if (navigator.canShare({ files: [file] })) { navigator.share({ files: [file], title: 'My Keyura Look', text: '✨ Try this jewellery at keyura.in' }).catch(function(err){ console.warn('Share failed:', err); // Fallback to download dlSnap(); }); return; } } catch (canShareError) { console.warn('File cannot be shared:', canShareError); // Continue to fallback } } catch(e) { console.warn('Share preparation failed:', e); } } // Fallback to download if Web Share API is not available or failed dlSnap(); } function closeSnap(){ var smod = document.getElementById('smod'); if (smod) smod.classList.remove('open'); snapData = null; // Also remove any active button states if needed var activeBtn = document.querySelector('.sbtn.active'); if (activeBtn) activeBtn.classList.remove('active'); } /*═══════════════════════════════════════════════════════════════════════ * ERROR OVERLAY *═══════════════════════════════════════════════════════════════════════*/ function showError(icon, title, msg, steps){ errOvl.classList.add('show'); document.getElementById('er-ic').textContent = icon || '⚠'; document.getElementById('er-title').textContent = title || 'Error'; document.getElementById('er-msg').innerHTML = msg || ''; var stepsEl = document.getElementById('er-steps'); if(steps){ stepsEl.innerHTML = steps; stepsEl.style.display = 'block'; } else stepsEl.style.display = 'none'; } function hideError(){ errOvl.classList.remove('show'); } function hideLoader(){ loader.classList.remove('show'); } function retry(){ hideError(); _started = false; start(); } /*═══════════════════════════════════════════════════════════════════════ * DEBUG PANEL *═══════════════════════════════════════════════════════════════════════*/ function setDbg(id, val, cls){ var el = document.getElementById('d-'+id); if(!el) return; el.textContent = val; el.classList.remove('dbg-ok','dbg-bad','dbg-warn'); if(cls==='ok') el.classList.add('dbg-ok'); if(cls==='bad') el.classList.add('dbg-bad'); if(cls==='warn') el.classList.add('dbg-warn'); } function populateServerDiag(){ var sd = SERVER_DIAG || {}; setDbg('raw', sd.raw || '(empty)', sd.raw ? 'ok' : 'bad'); setDbg('url', sd.url || '(empty)', sd.url ? 'ok' : 'bad'); setDbg('exists', sd.exists ? 'YES' : 'NO — file missing', sd.exists ? 'ok' : 'bad'); setDbg('size', sd.size ? (sd.size + ' bytes (' + Math.round(sd.size/1024) + ' KB)') : '0', sd.size ? 'ok' : 'bad'); setDbg('ext', sd.ext || '(none)', sd.ext==='png' ? 'ok' : (sd.ext==='jpg'||sd.ext==='jpeg'?'warn':'bad')); setDbg('alpha-s', sd.alpha_hint ? 'YES (PNG)' : 'NO', sd.alpha_hint ? 'ok' : 'warn'); setDbg('cat', sd.category || CATEGORY, 'ok'); } function evalVerdict(){ var v = document.getElementById('dbg-verdict'); if(!v) return; var sd = SERVER_DIAG || {}; var msg = '', cls = ''; if(!sd.raw){ msg = '❌ No image parameter in URL.'; cls='bad'; } else if(!sd.url){ msg = '❌ Image URL failed validation. Raw: '+sd.raw; cls='bad'; } else if(!sd.exists){ msg = '❌ File missing on server at '+sd.url; cls='bad'; } else if(sd.ext==='jpg' || sd.ext==='jpeg'){ msg = '⚠ Image is JPG — no transparency. Upload transparent PNG in admin AR Image field.'; cls='warn'; } else if(earImgHasAlpha === false){ msg = '⚠ PNG has NO transparent edges. Check that transparent PNG is in AR field, and turn OFF Cloudflare Polish (Speed → Optimization).'; cls='warn'; } else if(earImgHasAlpha === true){ msg = '✓ Image OK. If earring still missing, face tracking may be the issue — see "MediaPipe" row above.'; cls='good'; } if(msg){ v.textContent = msg; v.className = 'show ' + cls; } } function toggleDbg(){ dbgPanel.classList.toggle('show'); if(dbgPanel.classList.contains('show')){ populateServerDiag(); evalVerdict(); } } function _logoTap(){ var now = Date.now(); _logoTaps.push(now); _logoTaps = _logoTaps.filter(function(t){ return now - t < 1200; }); if(_logoTaps.length >= 3){ _logoTaps = []; toggleDbg(); } } /*═══════════════════════════════════════════════════════════════════════ * INIT *═══════════════════════════════════════════════════════════════════════*/ function _fitPage(){ var page = document.getElementById('tryon-page'); if(!page) return; // Use visualViewport height on mobile browsers to account for keyboard/chrome UI var viewportHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight; var top = page.getBoundingClientRect().top + window.scrollY; // Fill viewport from top of this element to bottom, with minimal margin for footer var h = viewportHeight - top - 10; // Reduced margin to maximize AR preview area page.style.height = Math.max(h, 550) + 'px'; // Increased minimum height further } function init(){ vid = document.getElementById('vid'); cvs = document.getElementById('cvs'); ctx = cvs.getContext('2d'); wrap = document.getElementById('wrap'); splash = document.getElementById('splash'); loader = document.getElementById('loader'); ldStep = document.getElementById('ld-step'); errOvl = document.getElementById('err'); oval = document.getElementById('oval'); msgEl = document.getElementById('msg'); dbgPanel = document.getElementById('dbg'); // Fit page to available height below Keyura header (re-run on resize/orientation) _fitPage(); window.addEventListener('resize', _fitPage); window.addEventListener('orientationchange', function(){ setTimeout(_fitPage, 300); }); // Show category badge and ear-mode pill if applicable document.getElementById('cat-badge').classList.add('show'); if(CFG.showEarMode) document.getElementById('ear-mode').classList.add('show'); populateServerDiag(); if(!IMG_SRC){ showError('🖼','No Image Selected', 'Open Try-On from a product page so the jewellery image can be loaded.'); return; } } window.addEventListener('pagehide', function(){ if(raf) cancelAnimationFrame(raf); if(stream) stream.getTracks().forEach(function(t){t.stop()}); if(faceMesh) try{ faceMesh.close(); }catch(e){} if(_permInterval) clearInterval(_permInterval); }); window.addEventListener('load', init); return { start: start, flip: flip, size: size, nudgeX: nudgeX, nudgeY: nudgeY, nudgeDiag: nudgeDiag, resetNudge: resetNudge, toggleOvl: toggleOvl, setMode: setMode, openCal: openCal, closeCal: closeCal, snap: snap, dlSnap: dlSnap, shareSnap: shareSnap, closeSnap: closeSnap, retry: retry, toggleDbg: toggleDbg, _logoTap: _logoTap }; })();