THE UNSEENS — Image → Code
1) Input Image
Supported: JPG, PNG, WebP. No server upload — everything runs in your browser.
2) Image Preview & Meta
No image loaded — upload or paste URL.
—
Generated Professional Image Prompt
Prompt is auto-generated client-side with heuristics; editable for manual tweaks.
Quick Analysis
No analysis yet.
3) Generated Code — Edit & Preview
index.html
styles.css
script.js
Live Preview
Side-by-side: left = original image, right = generated page in iframe.
History (local)
Tips
• Use clear screenshots of UI for better results.
• Generated code is editable; tweak CSS variables for color themes.
• ZIP includes only the three files (index.html, styles.css, script.js) + image asset.
; } function buildCSSTemplate(accent='#A29BFE'){ return `:root{ --accent: ${accent}; --bg: #fff; --text: #0b1220; --muted: #556; --container: 1100px; } *{box-sizing:border-box} body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; margin:0; background:var(--bg); color:var(--text);} .container{max-width:var(--container); margin:0 auto; padding:20px;} .site-header{background:linear-gradient(90deg, rgba(162,155,254,0.06), transparent); padding:12px 0; border-bottom:1px solid rgba(0,0,0,0.04);} .site-header .container{display:flex; align-items:center; justify-content:space-between;} .brand{font-weight:700; color:var(--accent)} .nav a{margin-left:18px; color:var(--text); text-decoration:none;} .hero{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:center; padding:40px 0;} .hero-img{width:100%; height:340px; object-fit:cover; border-radius:8px; box-shadow:0 6px 30px rgba(16,24,40,0.08);} .hero-content h1{font-size:32px; margin:0 0 8px;} .lead{color:var(--muted);} .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:40px 0;} .card{border:1px solid rgba(0,0,0,0.06); border-radius:8px; overflow:hidden; background:#fff; padding:12px;} .card img{width:100%; height:140px; object-fit:cover; border-radius:6px;} .site-footer{padding:20px 0; border-top:1px solid rgba(0,0,0,0.04); text-align:center; color:var(--muted);} /* Responsive */ @media(max-width:900px){ .hero{grid-template-columns:1fr;} .cards{grid-template-columns:repeat(2,1fr);} } @media(max-width:480px){ .cards{grid-template-columns:1fr;} .hero-img{height:220px} }`; } function buildJSTemplate(){ return `// Minimal interactive JS for generated page document.addEventListener('DOMContentLoaded', ()=> { // Example: card click expands (simple) document.querySelectorAll('.card').forEach(c=>{ c.addEventListener('click', ()=> { c.classList.toggle('expanded'); }); }); });`; } /* ========= Preview Rendering ========= */ function renderPreview(html, css, js){ const full = html.replace('', ``).replace('', `