Added UI

html/app.js

@@ -0,0 +1,75 @@
+let dragging = false
+let offsetX = 0;
+let offsetY = 0;
+
+const closeBtn = document.getElementById('closeBtn');
+const phone = document.getElementById('phone');
+const topbar = document.getElementById('topbar');
+
+phone.classList.add('absolute', 'top-20', 'left-20');
+topbar.classList.add('cursor-grab');
+
+topbar.addEventListener('mousedown', e => {
+  if (e.target.closest('button') || e.target.closest('span')) return;
+  dragging = true;
+  topbar.classList.add('cursor-grabbing');
+  topbar.classList.remove('cursor-grab');
+
+  const rect = phone.getBoundingClientRect();
+  offsetX = e.clientX - rect.left;
+  offsetY = e.clientY - rect.top;
+});
+
+window.addEventListener('mousemove', e => {
+  if (!dragging) return;
+  phone.style.left = `${e.clientX - offsetX}px`;
+  phone.style.top = `${e.clientY - offsetY}px`;
+});
+
+window.addEventListener('mouseup', () => {
+  if (!dragging) return;
+  dragging = false;
+  topbar.classList.remove('cursor-grabbing');
+  topbar.classList.add('cursor-grab');
+});
+
+window.addEventListener('message', function(event) {
+    const d = event.data;
+    if (!d) return;
+    
+    if (d.action === 'toggle') {
+        if (d.open) {
+            phone.classList.remove('hidden');
+            updateTime();
+        } else {
+            phone.classList.add('hidden');
+        }
+    }
+});
+
+closeBtn?.addEventListener('click', () => {
+  phone.classList.add('hidden');
+
+  const parentResource = getParentResourceName();
+  fetch(`https://${parentResource}/close`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({})
+  });
+});
+
+function updateTime() {
+  const t = document.getElementById('time');
+  const now = new Date();
+  const hh = String(now.getHours()).padStart(2, '0');
+  const mm = String(now.getMinutes()).padStart(2, '0');
+  t.innerText = hh + ':' + mm;
+}
+
+function getParentResourceName() {
+  try {
+    return new URL(document.location).searchParams.get('parent') || window.parentResource || 'gb-phone';
+  } catch {
+    return 'gb-phone';
+  }
+}