Create index.html

index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="UTF-8">
+<title>Temp Email Farel</title>
+<style>
+body{background:#020617;color:#fff;font-family:sans-serif}
+.box{max-width:500px;margin:40px auto;background:#0f172a;padding:20px;border-radius:10px}
+input,select,button{width:100%;padding:10px;margin:6px 0}
+button{background:#38bdf8;border:0;cursor:pointer}
+.msg{background:#020617;padding:8px;border-radius:5px;margin:5px 0}
+</style>
+</head>
+<body>
+
+<div class="box">
+<h2>📧 Temp Email Farel</h2>
+
+<input id="name" placeholder="username">
+<select id="domain"></select>
+<button onclick="createEmail()">Buat Email</button>
+
+<b id="email"></b>
+<div id="inbox"></div>
+</div>
+
+<script>
+let currentEmail = null;
+let timer = null;
+
+// load domain
+async function loadDomains(){
+    const r = await fetch('/api/domains');
+    const j = await r.json();
+    j.domains.forEach(d=>{
+        domain.innerHTML += `<option>${d}</option>`;
+    });
+}
+
+// create email
+async function createEmail(){
+    const r = await fetch('/api/email/new',{
+        method:'POST',
+        headers:{'Content-Type':'application/json'},
+        body:JSON.stringify({
+            name: name.value,
+            domain: domain.value
+        })
+    });
+    const j = await r.json();
+    if(!j.success) return alert(j.error);
+
+    currentEmail = j.email;
+    email.innerText = "📬 " + j.email;
+
+    if(timer) clearInterval(timer);
+    timer = setInterval(loadInbox, 5000);
+}
+
+// load inbox
+async function loadInbox(){
+    if(!currentEmail) return;
+    const r = await fetch('/api/email/' + currentEmail + '/messages');
+    const j = await r.json();
+    inbox.innerHTML = '';
+    j.messages?.forEach(m=>{
+        inbox.innerHTML += `
+        <div class="msg">
+            <b>${m.from}</b><br>
+            ${m.subject}
+        </div>`;
+    });
+}
+
+loadDomains();
+</script>
+</body>
+</html>