SiteFixer FREE DEMO

Fix & Preview Any Web Code

Paste HTML, CSS or JS → AI debugs → Live preview → Export

0 / 10 KB
Export
sitefixer — preview
Click "Run Preview" to render your code
SiteFixer AI Claude powered
Auto-apply
On
SF
👋 আমি SiteFixer AI! তোমার code paste করো, bugs fix করবো, design change করবো।

কীভাবে ব্যবহার করবে:
• Code editor এ paste করো → Run Preview চাপো
• Preview এর screenshot নিয়ে বলো কী change করবে
• AI Fix Bugs চাপলে automatically errors find করবো
• Ctrl+V দিয়ে যেকোনো screenshot paste করো
Ctrl+V = paste from clipboard ✨ Demo Mode — Unlimited
Enter = send  |  Shift+Enter = new line
Your Plan
SpeedNormal
File size10 KB
AI chats5 / day
QualityStandard

Free Plan (Limited)

Ad Space
300×250
💡 Quick Tips
📷 Preview screenshot → chat এ paste → AI fix করবে
🔧 "AI Fix Bugs" চাপলে automatic error detect হবে
💾 .html export করলে পুরো working file পাবে
🌐 CSS/JS mode এ শুধু সেই কোড লিখলেও preview হবে
// ── Config ───────────────────────────────────────────────────────────────── const API_BASE = 'https://converterpro.dcif.bd'; let authToken = localStorage.getItem('sf_token') || null; let isPremium = false; let currentMode = 'html'; // html, css, js, full let autoApply = true; let pendingCode = null; let chatCount = 0; let pastedImgB64 = null; const MAX_FREE_CHAT = 5; const MAX_FREE_SIZE = 10 * 1024; // ── API helper ────────────────────────────────────────────────────────────── async function apiCall(path, method='GET', body=null) { const headers = {'Content-Type':'application/json'}; if (authToken) headers['Authorization'] = 'Bearer ' + authToken; try { const r = await fetch(API_BASE + path, {method, headers, body: body ? JSON.stringify(body) : null}); return await r.json(); } catch(e) { return null; } } // ── Auth ──────────────────────────────────────────────────────────────────── async function loadSession() { if (!authToken) return; const d = await apiCall('/api/auth/me'); if (d && d.success) { isPremium = d.user.isPremium; document.getElementById('authBtnText').textContent = d.user.name.split(' ')[0]; if (isPremium) activatePremiumUI(); } else { authToken = null; localStorage.removeItem('sf_token'); } } function showAuthModal(tab='login') { document.getElementById('authModal').classList.remove('hidden'); switchAuthTab(tab); } function closeAuthModal() { document.getElementById('authModal').classList.add('hidden'); } function switchAuthTab(tab) { document.getElementById('loginForm').classList.toggle('hidden', tab!=='login'); document.getElementById('registerForm').classList.toggle('hidden', tab!=='register'); document.getElementById('tabLogin').style.color = tab==='login' ? '#a5b4fc' : '#64748b'; document.getElementById('tabRegister').style.color = tab==='register' ? '#a5b4fc' : '#64748b'; document.getElementById('tabLogin').style.borderBottomColor = tab==='login' ? '#6366f1' : 'transparent'; document.getElementById('tabRegister').style.borderBottomColor = tab==='register' ? '#6366f1' : 'transparent'; } async function doLogin() { const email = document.getElementById('loginEmail').value.trim(); const pass = document.getElementById('loginPassword').value; const err = document.getElementById('loginErr'); if (!email||!pass) { err.textContent='All fields required'; err.classList.remove('hidden'); return; } const btn = document.getElementById('loginBtn'); btn.textContent='Signing in...'; btn.disabled=true; const d = await apiCall('/api/auth/login','POST',{email,password:pass}); if (d&&d.success) { authToken=d.token; localStorage.setItem('sf_token',authToken); isPremium=d.user.isPremium; document.getElementById('authBtnText').textContent=d.user.name.split(' ')[0]; if (isPremium) activatePremiumUI(); closeAuthModal(); addBubble('system','✅ Welcome back, '+d.user.name+'!'); } else { err.textContent=(d&&d.message)||'Login failed'; err.classList.remove('hidden'); } btn.textContent='Sign In'; btn.disabled=false; } async function doRegister() { const name=document.getElementById('regName').value.trim(); const email=document.getElementById('regEmail').value.trim(); const pass=document.getElementById('regPassword').value; const err=document.getElementById('registerErr'); if (!name||!email||pass.length<6) { err.textContent='All fields required (min 6 char password)'; err.classList.remove('hidden'); return; } const btn=document.getElementById('registerBtn'); btn.textContent='Creating...'; btn.disabled=true; const d = await apiCall('/api/auth/register','POST',{name,email,password:pass}); if (d&&d.success) { authToken=d.token; localStorage.setItem('sf_token',authToken); document.getElementById('authBtnText').textContent=name.split(' ')[0]; closeAuthModal(); addBubble('system','✅ Account created! Welcome, '+name+'!'); } else { err.textContent=(d&&d.message)||'Registration failed'; err.classList.remove('hidden'); } btn.textContent='Create Account'; btn.disabled=false; } function doLogout() { authToken=null; isPremium=false; localStorage.removeItem('sf_token'); document.getElementById('authBtnText').textContent='Login'; deactivatePremiumUI(); } // ── Plan ──────────────────────────────────────────────────────────────────── function togglePlan() { isPremium ? deactivatePremiumUI() : showPricing(); } function showPricing() { document.getElementById('pricingModal').classList.remove('hidden'); } function closePricing() { document.getElementById('pricingModal').classList.add('hidden'); } async function activatePremium() { if (!authToken) { closePricing(); showAuthModal('login'); return; } const d = await apiCall('/api/payment/initiate','POST'); if (d&&d.success) { window.location.href=d.gatewayUrl; } else { activatePremiumUI(); closePricing(); addBubble('system','⚡ Pro activated! (demo mode)'); } } function activatePremiumUI() { isPremium=true; document.getElementById('toggleThumb').style.left='20px'; document.getElementById('planToggle').style.background='linear-gradient(135deg,#6366f1,#8b5cf6)'; document.getElementById('planStatus').textContent='Pro Plan (Unlimited)'; document.getElementById('planStatus').style.color='#a5b4fc'; document.getElementById('planDetails').innerHTML=`
SpeedInstant ⚡
File size500 KB
AI chatsUnlimited
Quality4K HD
`; checkSize(); } function deactivatePremiumUI() { isPremium=false; document.getElementById('toggleThumb').style.left='2px'; document.getElementById('planToggle').style.background='#374151'; document.getElementById('planStatus').textContent='Free Plan (Limited)'; document.getElementById('planStatus').style.color=''; document.getElementById('planDetails').innerHTML=`
SpeedNormal
File size10 KB
AI chats5 / day
QualityStandard
`; checkSize(); } // ── Code Mode ─────────────────────────────────────────────────────────────── function setMode(mode) { currentMode = mode; ['html','css','js','full'].forEach(m => { const btn = document.getElementById('mode'+m.charAt(0).toUpperCase()+m.slice(1).replace('ull','ull')); if(btn) btn.className = m===mode ? 'tab-active' : 'tab-inactive'; }); // Update placeholders const placeholders = { html: 'Paste your HTML code here...', css: '/* Paste your CSS here */\nbody { background: #1a1a2e; }\nh1 { color: white; }', js: '// Paste your JavaScript here\nconsole.log("Hello SiteFixer!");', full: 'Paste complete HTML page (...)' }; document.getElementById('codeInput').placeholder = placeholders[mode]; document.getElementById('previewMode').textContent = mode.toUpperCase(); } // ── Code utils ────────────────────────────────────────────────────────────── function clearCode() { document.getElementById('codeInput').value=''; onCodeChange(); } function handleTab(e) { if(e.key==='Tab'){e.preventDefault();const t=e.target;const s=t.selectionStart;t.value=t.value.substring(0,s)+' '+t.value.substring(t.selectionEnd);t.selectionStart=t.selectionEnd=s+2;} } function formatCode() { // Basic formatting let code = document.getElementById('codeInput').value; if (!code.trim()) return; addBubble('system','Code formatted!'); } function onCodeChange() { checkSize(); // Auto-preview debounce clearTimeout(window._previewTimer); window._previewTimer = setTimeout(runPreview, 800); } function checkSize() { const code = document.getElementById('codeInput').value; const size = new Blob([code]).size; const limit = isPremium ? 500*1024 : MAX_FREE_SIZE; const pct = Math.min((size/limit)*100, 100); const kb = (size/1024).toFixed(1); const limitLabel = isPremium ? '500' : '10'; document.getElementById('sizeLabel').textContent = `${kb} / ${limitLabel} KB`; document.getElementById('sizeFill').style.width = pct+'%'; document.getElementById('sizeFill').style.background = pct>90 ? '#ef4444' : pct>70 ? '#f59e0b' : '#6366f1'; const warn = document.getElementById('sizeWarning'); if (size > limit) { warn.classList.remove('hidden'); } else { warn.classList.add('hidden'); } } // ── Preview ───────────────────────────────────────────────────────────────── function setPreviewSize(size) { const wrapper = document.getElementById('previewWrapper'); const sizes = { full:'100%', tablet:'768px', mobile:'375px' }; wrapper.style.width = sizes[size]||'100%'; wrapper.style.borderRadius = size==='full'?'0':'8px'; wrapper.style.overflow = 'hidden'; } function buildPreviewHTML() { const code = document.getElementById('codeInput').value.trim(); if (!code) return ''; if (currentMode === 'html' || currentMode === 'full') return code; if (currentMode === 'css') return `

CSS Preview

Your CSS is applied to this page.

Demo element
`; if (currentMode === 'js') return `