🚀 AI Landing Page Builder
Login
const DEFAULT_API = "ISI_API_KAMU";
function login(){ const email = document.getElementById('email').value.trim();
if(!email){ alert('Masukkan email'); return; }
localStorage.setItem('user', email);
if(!localStorage.getItem('limit_'+email)){ localStorage.setItem('limit_'+email, 3); }
initApp(); }
function logout(){ localStorage.removeItem('user'); location.reload(); }
function initApp(){ const user = localStorage.getItem('user'); if(!user) return;
document.getElementById('loginBox').style.display='none'; document.getElementById('app').style.display='block';
document.getElementById('userEmail').innerText = user;
updateLimit(); }
function updateLimit(){ const user = localStorage.getItem('user'); const limit = localStorage.getItem('limit_'+user); document.getElementById('limit').innerText = limit; }
async function generate(){
const btn = document.getElementById('btnGenerate'); btn.innerText = "Loading..."; btn.disabled = true;
const user = localStorage.getItem('user'); let limit = parseInt(localStorage.getItem('limit_'+user));
const nama = document.getElementById('nama').value; const layanan = document.getElementById('layanan').value; const area = document.getElementById('area').value; const wa = document.getElementById('wa').value;
if(!nama || !layanan || !area || !wa){ alert('Lengkapi semua data'); resetBtn(); return; }
const customKey = document.getElementById('apiKey').value; const apiKey = customKey ? customKey : DEFAULT_API;
if(!customKey && limit <= 0){
alert('Limit habis!');
resetBtn();
return;
}
const prompt = `Buat landing page HTML jasa lokal.
Nama: ${nama}
Layanan: ${layanan}
Area: ${area}
WA: ${wa}
Gunakan Bootstrap, responsive.`;
try{
const res = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${apiKey}`, {
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({contents:[{parts:[{text:prompt}]}]})
});
const data = await res.json();
const html = data.candidates[0].content.parts[0].text;
document.getElementById('output').value = html;
document.getElementById('preview').srcdoc = html;
if(!customKey){
limit--;
localStorage.setItem('limit_'+user, limit);
updateLimit();
}
}catch(e){
alert('Gagal generate');
console.log(e);
}
resetBtn();
}
function resetBtn(){
const btn = document.getElementById('btnGenerate');
btn.innerText = "Generate Landing Page";
btn.disabled = false;
}
window.onload = function(){
initApp();
}