333 Network Creation Studio

Enter SIte™

Build privately in your browser with a shared HOLLO identity or a local editor profile.
Shared Member Identity

Checking HOLLO enrollment…

SIte can prefill the member name, handle, number, and an E=Ven requested address when local records are available.

Open HOLLO Enrollment

Local editing profiles do not create a remote account or synchronize automatically.

`; } function styleToCss(style={}){ const pairs=[]; if(style.fontSize)pairs.push(`font-size:${Number(style.fontSize)}px`); if(style.color)pairs.push(`color:${style.color}`); if(style.fontFamily)pairs.push(`font-family:${style.fontFamily}`); if(style.textAlign)pairs.push(`text-align:${style.textAlign}`); if(style.bgColor)pairs.push(`background:${style.bgColor}`); if(style.padding!==undefined)pairs.push(`padding:${Number(style.padding)}px`); return pairs.join(";"); } const BunyaPublishingService=Object.freeze({ mode:"local", apiBase:"", async publish(_payload){ if(this.mode!=="remote")return {ok:false,reason:"local-mode"}; throw new Error("Bunya publishing is not configured."); } }); function openBunyaPublish(){ siteModal("Publish with Bunya",`
SIte™ can prepare a publishable static build now. Real publishing through Bunya will require 333 Identity authentication, a deployment API, environment permissions, domain selection, and server-side credentials.
Open Bunya Workspace Open 333 Network Gateway
Target environment
Target domain
`,` `); $("downloadBuildBtn").onclick=()=>downloadText("index.html",buildStaticWebsite(),"text/html"); $("sendBunyaBtn").onclick=async()=>{ const result=await BunyaPublishingService.publish({ environment:$("bunyaEnvironment").value, domain:$("bunyaDomain").value.trim(), site:deepClone(site), build:buildStaticWebsite() }); if(!result.ok)setStatus("Bunya publishing is prepared but not connected.","warn"); closeSiteModal(); }; } function openNetworkDirectory(){ siteModal("333 Network Applications",`

HOLLO

Enrollment, shared member identity, trusted contacts, and direct communication.

Open HOLLO

KANSEE

Private meeting rooms, invitations, participants, notes, and room history.

Open KANSEE

E=Ven Mail

Email-address applications and a local correspondence workspace prepared for provisioning.

Open E=Ven Mail

Bazaar Art Live

Creative profiles, posts, stories, reels, groups, events, and public community participation.

Open Bazaar

SIte

The current website and application creation studio.

Current Application

Bunya

Domains, DNS, infrastructure plans, deployment preparation, monitoring, and backups.

Open Bunya
`,`Return to 333 Network Gateway`); } function selectedEmbedBlock(){ const block=selectedBlock(); return block?.type==="embed"?block:null; } function embedStarterTemplate(){ return `

Hello from SIte

Edit this HTML, CSS, or JavaScript and select Preview.

`; } function setEmbedStudioStatus(message,tone="neutral"){ const status=$("embedStudioStatus"); if(!status)return; status.textContent=message; status.style.color= tone==="ok"?"var(--ok)": tone==="bad"?"var(--lock)": tone==="warn"?"var(--warn)": "var(--muted)"; } function clearEmbedPreviewUrl(){ if(embedPreviewUrl){ URL.revokeObjectURL(embedPreviewUrl); embedPreviewUrl=""; } } function runEmbedStudioPreview(){ const code=$("embedStudioCode")?.value||""; const frame=$("embedStudioPreview"); if(!frame)return; clearEmbedPreviewUrl(); const documentCode=code.trim()||""; const blob=new Blob([documentCode],{type:"text/html"}); embedPreviewUrl=URL.createObjectURL(blob); frame.src=embedPreviewUrl; try{localStorage.setItem(EMBED_STUDIO_DRAFT_KEY,code)}catch(_){} setEmbedStudioStatus( "Preview refreshed inside a sandboxed frame. External resources may contact their own providers.", "ok" ); } async function copyEmbedStudioCode(){ const input=$("embedStudioCode"); if(!input)return; const code=input.value; try{ await navigator.clipboard.writeText(code); setEmbedStudioStatus("Embed code copied to the clipboard.","ok"); }catch(_){ input.focus(); input.select(); const copied=document.execCommand("copy"); setEmbedStudioStatus( copied?"Embed code copied to the clipboard.":"Clipboard access was blocked. The code is selected for manual copying.", copied?"ok":"warn" ); } } function clearEmbedStudio(){ const input=$("embedStudioCode"); const frame=$("embedStudioPreview"); if(!input||!frame)return; input.value=""; clearEmbedPreviewUrl(); frame.removeAttribute("src"); frame.srcdoc=""; try{localStorage.removeItem(EMBED_STUDIO_DRAFT_KEY)}catch(_){} setEmbedStudioStatus("Embed Studio cleared."); input.focus(); } function saveEmbedStudioToCanvas(){ if(currentPage.locked){ setEmbedStudioStatus("Unlock this page before adding or updating an embed block.","bad"); return; } const input=$("embedStudioCode"); const code=input?.value||""; if(!code.trim()){ setEmbedStudioStatus("Add HTML, CSS, or JavaScript before inserting it.","bad"); input?.focus(); return; } const lang=getLang(); let block=selectedEmbedBlock(); if(block){ ensureTranslationMap(block); block.t[lang]=code; saveSite(); pushHistory("Updated Embed Studio block"); render(); closeSiteModal(); setStatus("Selected embed block updated.","ok"); return; } block={ id:uid(), type:"embed", t:{[site.languages.default]:code}, layouts:{ desktop:{x:70,y:100,w:520,h:340} } }; block.pos=block.layouts.desktop; currentPage.blocks.push(block); selectedBlockId=block.id; saveSite(); pushHistory("Added Embed Studio block"); render(); closeSiteModal(); setStatus("Embed Studio block added to the page.","ok"); } function openEmbedStudio(){ const block=selectedEmbedBlock(); const lang=getLang(); let initialCode=""; if(block){ ensureTranslationMap(block); initialCode=getText(block,lang); }else{ try{ initialCode=localStorage.getItem(EMBED_STUDIO_DRAFT_KEY)||""; }catch(_){} if(!initialCode)initialCode=embedStarterTemplate(); } siteModal( block?"Edit Embed Block":"SIte Embed Studio", `

Build and test an embedded experience

Write HTML, CSS, or JavaScript, preview it in isolation, then insert it into the current SIte page.

${block?"Editing the selected embed block.":"A private local draft is preserved in this browser."}
Sandboxed preview
Preview code cannot access the SIte parent page or its local storage. External scripts, fonts, images, and APIs may still send requests to their providers.
  • Use Preview after each meaningful change.
  • Copy Code keeps the original source available elsewhere.
  • Insert into Page creates a freely positioned embed block.
`, `
${block?"Updating selected embed":"Creating a new embed"}
` ); const modalCard=$("siteModalLayer")?.querySelector(".modal-card"); modalCard?.classList.add("embed-studio-card"); const input=$("embedStudioCode"); input.value=initialCode; $("embedPreviewBtn").onclick=runEmbedStudioPreview; $("embedCopyBtn").onclick=copyEmbedStudioCode; $("embedClearBtn").onclick=clearEmbedStudio; $("embedInsertBtn").onclick=saveEmbedStudioToCanvas; input.addEventListener("input",()=>{ try{localStorage.setItem(EMBED_STUDIO_DRAFT_KEY,input.value)}catch(_){} }); input.addEventListener("keydown",event=>{ if(event.key==="Tab"){ event.preventDefault(); const start=input.selectionStart; const end=input.selectionEnd; input.setRangeText(" ",start,end,"end"); } if((event.ctrlKey||event.metaKey)&&event.key==="Enter"){ event.preventDefault(); runEmbedStudioPreview(); } }); runEmbedStudioPreview(); input.focus(); } function siteModal(title,body,footer=""){ $("siteModalTitle").textContent=title; $("siteModalBody").innerHTML=body; $("siteModalFoot").innerHTML=footer; $("siteModalLayer").classList.add("active"); $("siteModalLayer").setAttribute("aria-hidden","false"); } function closeSiteModal(){ clearEmbedPreviewUrl(); $("siteModalLayer").querySelector(".modal-card")?.classList.remove("embed-studio-card"); $("siteModalLayer").classList.remove("active"); $("siteModalLayer").setAttribute("aria-hidden","true"); } function openRestorePoints(){ const list=getSnapshots(); siteModal("Restore Points",`
${list.length?list.map(item=>`
${escapeHtml(item.name)}${new Date(item.createdAt).toLocaleString()}
`).join(""):`
No restore points exist yet.
`}
`,``); $("createRestoreNowBtn").onclick=()=>{ createRestorePoint("Manual restore point"); closeSiteModal(); }; document.querySelectorAll("[data-restore-id]").forEach(button=>{ button.onclick=()=>{ const item=getSnapshots().find(x=>x.id===button.dataset.restoreId); if(!item)return; if(!confirm("Restore this version? Current unsaved changes will be replaced."))return; site=deepClone(item.site); currentPage=site.pages[0]; selectedBlockId=null; saveSite(); render(); pushHistory("Restored snapshot"); closeSiteModal(); setStatus("Restore point loaded.","ok"); }; }); } /* ========================= Export / Reset ========================= */ $("btnExport").addEventListener("click",()=>{ const data=JSON.stringify(site,null,2); try{ navigator.clipboard.writeText(data); setStatus("Export copied to clipboard.","ok"); }catch(e){ setStatus("Clipboard blocked. Showing export…","warn"); prompt("Copy JSON:",data); } }); $("btnReset").addEventListener("click",()=>{ const ok=confirm("Reset SIte Alpha (local) data? This cannot be undone."); if(!ok) return; try{ store.removeItem(STORAGE_KEY); }catch(e){} site=deepClone(DEFAULT_SITE); currentPage=site.pages[0]; selectedBlockId=null; saveSiteDebounced(); render(); setStatus("Reset complete.","ok"); }); /* ========================= Page styles & Preview mode ========================= */ function applyPageStyles(){ const pageEl=$("pageCanvas"); if(!pageEl) return; const bgColor=currentPage.bgColor||"#ffffff"; const bgImage=currentPage.bgImage||""; pageEl.style.backgroundColor=bgColor; if(bgImage){ pageEl.style.backgroundImage=`url(${bgImage})`; pageEl.style.backgroundSize="cover"; pageEl.style.backgroundPosition="center center"; }else{ pageEl.style.backgroundImage="none"; } } $("btnPreview").addEventListener("click",()=>{ if(viewMode==="admin"){ viewMode="preview"; document.body.classList.add("preview"); $("btnPreview").textContent="Back to Admin"; setStatus("Preview view (public screen).","ok"); }else{ viewMode="admin"; document.body.classList.remove("preview"); $("btnPreview").textContent="Preview View"; setStatus("Admin view restored.","ok"); } }); /* ========================= Button Palette ========================= */ function openButtonPalette(){ $("buttonPalette").classList.remove("hidden"); } function closeButtonPalette(){ $("buttonPalette").classList.add("hidden"); } function createButtonFromPalette(kind){ if(currentPage.locked){ setStatus("Page is locked.","bad"); return; } const defLang=site.languages.default; const basePos={x:40,y:60,w:140,h:48}; const blocksToAdd=[]; if(kind==="plain"){ const b={id:uid(), type:"button", t:{[defLang]:"Button"}, style:{fontSize:18,bgColor:"#ffffff"}, pos:deepClone(basePos)}; blocksToAdd.push(b); }else if(kind==="emoji-star"){ const b={id:uid(), type:"button", t:{[defLang]:"⭐"}, style:{fontSize:28,bgColor:"#ffffff"}, pos:deepClone(basePos)}; blocksToAdd.push(b); }else if(kind==="emoji-heart"){ const b={id:uid(), type:"button", t:{[defLang]:"❤️"}, style:{fontSize:28,bgColor:"#ffffff"}, pos:deepClone(basePos)}; blocksToAdd.push(b); }else if(kind==="top"){ const b={id:uid(), type:"button", t:{[defLang]:"↑ Top"}, style:{fontSize:16,bgColor:"#ffffff"}, pos:deepClone(basePos), link:{type:"url",url:"#top"}}; blocksToAdd.push(b); }else if(kind==="home"){ const b={id:uid(), type:"button", t:{[defLang]:"⌂ Home"}, style:{fontSize:18,bgColor:"#ffffff"}, pos:deepClone(basePos)}; blocksToAdd.push(b); }else if(kind==="social-row"){ const icons=[ {label:"📘", url:""}, {label:"📸", url:""}, {label:"▶️", url:""} ]; icons.forEach((icon,idx)=>{ const pos=deepClone(basePos); pos.x += idx*70; const b={id:uid(), type:"button", t:{[defLang]:icon.label}, style:{fontSize:24,bgColor:"#ffffff"}, pos}; b.link={type:"url", url:icon.url}; blocksToAdd.push(b); }); }else{ const b={id:uid(), type:"button", t:{[defLang]:"Button"}, style:{fontSize:18,bgColor:"#ffffff"}, pos:deepClone(basePos)}; blocksToAdd.push(b); } blocksToAdd.forEach(b=>currentPage.blocks.push(b)); const last=blocksToAdd[blocksToAdd.length-1]; selectedBlockId=last.id; saveSiteDebounced(); render(); setStatus("Button added.","ok"); } $("btnAddButton").addEventListener("click",openButtonPalette); $("btnPaletteClose").addEventListener("click",closeButtonPalette); $("buttonPalette").addEventListener("click",e=>{ if(e.target.id==="buttonPalette") closeButtonPalette(); }); document.querySelectorAll(".palette-btn").forEach(btn=>{ btn.addEventListener("click",()=>{ const kind=btn.getAttribute("data-kind"); closeButtonPalette(); createButtonFromPalette(kind); }); }); /* ========================= Initial render ========================= */ function render(){ renderTopBadges(); renderPages(); renderLangs(); renderCanvas(); renderInspector(); syncDomainInputs(); } $("btnUndo").addEventListener("click",undo); $("btnRedo").addEventListener("click",redo); $("btnSnapshot").addEventListener("click",openRestorePoints); $("btnEmbedStudio").addEventListener("click",openEmbedStudio); $("btnExportSite").addEventListener("click",()=>{ downloadText("index.html",buildStaticWebsite(),"text/html"); setStatus("Static website exported.","ok"); }); $("btnPublishBunya").addEventListener("click",openBunyaPublish); $("btnNetworkDirectory").addEventListener("click",openNetworkDirectory); $("siteModalClose").addEventListener("click",closeSiteModal); $("siteModalLayer").addEventListener("click",e=>{if(e.target===$("siteModalLayer"))closeSiteModal()}); $("btnToggleLeft").addEventListener("click",()=>{ if(window.innerWidth<760)document.body.classList.toggle("left-open"); else document.body.classList.toggle("left-collapsed"); }); $("btnToggleRight").addEventListener("click",()=>{ if(window.innerWidth<1100)document.body.classList.toggle("right-open"); else document.body.classList.toggle("right-collapsed"); }); document.querySelectorAll("[data-device]").forEach(button=>{ button.addEventListener("click",()=>{ currentDevice=button.dataset.device; document.body.classList.remove("device-desktop","device-tablet","device-phone"); document.body.classList.add("device-"+currentDevice); document.querySelectorAll("[data-device]").forEach(b=>b.classList.toggle("active",b===button)); currentPage.blocks.forEach(migrateResponsiveLayout); renderCanvas(); renderInspector(); setStatus(currentDevice.charAt(0).toUpperCase()+currentDevice.slice(1)+" canvas active.","ok"); }); }); window.addEventListener("storage",event=>{ if([HOLLO_STORAGE_KEY,IDENTITY_HANDOFF_KEY,EVEN_MAIL_STORAGE_KEY,AUTH_KEY].includes(event.key)){ renderSharedIdentity(); updateTopIdentity(); } }); document.addEventListener("333-hollo-profile-created",renderSharedIdentity); document.addEventListener("333-even-mail-application-created",renderSharedIdentity); document.addEventListener("keydown",e=>{ if((e.ctrlKey||e.metaKey)&&e.shiftKey&&e.key.toLowerCase()==="e"){ e.preventDefault(); if(!$("app").classList.contains("hidden"))openEmbedStudio(); } if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="z"){ e.preventDefault(); e.shiftKey?redo():undo(); } if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="y"){ e.preventDefault();redo(); } }); authInit(); render();