From 001239a809774b572dd716fcb65fd7ae4a5d1b99 Mon Sep 17 00:00:00 2001 From: Phillip Michelsen Date: Thu, 27 Aug 2026 09:06:25 +0800 Subject: [PATCH] Add video generation outage banner and notice dialog --- internal/httpserver/server.go | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/internal/httpserver/server.go b/internal/httpserver/server.go index 40a59a2..6b7cc57 100644 --- a/internal/httpserver/server.go +++ b/internal/httpserver/server.go @@ -222,7 +222,7 @@ func renderStatus(w http.ResponseWriter, src string, data any, status int) { template.Must(template.New("page").Parse(src)).Execute(w, data) } -const head = `{{if .Title}}{{.Title}} · {{end}}Preface Tools` +const head = `{{if .Title}}{{.Title}} · {{end}}Preface Tools
Service notice

Video generation unavailable

New animations cannot be started right now.

Unfortunately, video generation is currently unoperational because the provided API key has either expired or run out of credits. It will work again once the key has been renewed or topped up.

` const loginTemplate = head + `
` const shellTemplate = head + `
Preface Tools
{{if .Instructor}}
Instructor console
{{else}}{{end}}
{{.Content}}
` @@ -239,9 +239,11 @@ func css(w http.ResponseWriter, r *http.Request) { .recent-section .section-heading>span{display:none}.generate-card .step-number{font-size:0}.generate-card .step-number:before{font-size:.78rem;content:"03"} @media(max-width:1050px){.tool-grid{grid-template-columns:1fr 1.25fr}.generate-card{grid-column:1/-1}.generate-card .card-body{display:grid;grid-template-columns:1fr 1fr;align-items:center}.generate-card .card-heading{grid-column:1/-1}.login-page{grid-template-columns:.75fr 1.25fr}.login-options{grid-template-columns:1fr}} @media(max-width:720px){.app-navbar{min-height:4rem}.brand-logo{width:5.4rem}.brand-divider,.brand>span:last-child{display:none}.tool-picker>span:first-child,.app-actions .btn span{display:none}.tool-picker .select{width:9rem}.app-main{padding:1rem}.workspace-heading{align-items:flex-start;flex-direction:column;gap:1rem}.workflow-steps{overflow:auto;width:100%;padding-bottom:.25rem}.workflow-step{white-space:nowrap}.tool-grid{grid-template-columns:1fr}.generate-card{grid-column:auto}.generate-card .card-body{display:flex}.login-simple{padding:1rem}.login-simple .login-options{grid-template-columns:1fr}.login-brand{margin-bottom:1.5rem}.login-brand img{width:7.5rem}.generation{grid-template-columns:1fr}.generation-actions{grid-column:1}.output-grid{grid-template-columns:1fr}.upload-zone{min-height:16rem}} +.service-banner{display:flex;align-items:flex-start;gap:.75rem;border-bottom:1px solid rgba(182,106,22,.25);background:#fdf3e0;color:#7a4d10;padding:.75rem clamp(1rem,3vw,2.5rem)}.service-banner svg{flex:none;width:1.2rem;height:1.2rem;margin-top:.1rem;color:#b66a16}.service-banner-text{display:grid;gap:.15rem}.service-banner-text strong{font-size:.85rem;font-weight:750;color:#8a5510}.service-banner-text span{font-size:.78rem;line-height:1.5;color:#7a4d10} +.service-eyebrow{color:#b66a16} `) } func js(w http.ResponseWriter, r *http.Request) { w.Header().Set("Content-Type", "application/javascript") - fmt.Fprint(w, `const placePrompt=()=>{const p=document.querySelector("#prompt-result"),s=document.querySelector(".generate-card .settings-list");if(p&&s&&!s.contains(p)){s.replaceChildren(p)}};const promptButton=e=>e.detail.elt?.matches?.('[hx-post="prompt"]')?e.detail.elt:null;document.addEventListener("DOMContentLoaded",placePrompt);document.addEventListener("htmx:beforeRequest",e=>{const b=promptButton(e);if(b){b.disabled=true;b.setAttribute("aria-busy","true")}});document.addEventListener("htmx:afterRequest",e=>{const b=promptButton(e);if(b){b.disabled=false;b.removeAttribute("aria-busy")}});document.addEventListener("htmx:afterSwap",placePrompt);document.addEventListener("change",e=>{if(e.target.id==="tool-selector")location.href=e.target.value});document.addEventListener("click",e=>{if(e.target.closest("[data-open-approval]"))document.querySelector("#approval-dialog")?.showModal();if(e.target.closest("[data-close-approval]"))document.querySelector("#approval-dialog")?.close()});document.addEventListener("generationQueued",()=>{const d=document.querySelector("#approval-dialog"),p=d?.querySelector('[name="instructor_pin"]');if(p)p.value="";d?.close()});`) + fmt.Fprint(w, `const placePrompt=()=>{const p=document.querySelector("#prompt-result"),s=document.querySelector(".generate-card .settings-list");if(p&&s&&!s.contains(p)){s.replaceChildren(p)}};const promptButton=e=>e.detail.elt?.matches?.('[hx-post="prompt"]')?e.detail.elt:null;document.addEventListener("DOMContentLoaded",placePrompt);document.addEventListener("htmx:beforeRequest",e=>{const b=promptButton(e);if(b){b.disabled=true;b.setAttribute("aria-busy","true")}});document.addEventListener("htmx:afterRequest",e=>{const b=promptButton(e);if(b){b.disabled=false;b.removeAttribute("aria-busy")}});document.addEventListener("htmx:afterSwap",placePrompt);document.addEventListener("change",e=>{if(e.target.id==="tool-selector")location.href=e.target.value});document.addEventListener("click",e=>{if(e.target.closest("[data-open-approval]"))document.querySelector("#approval-dialog")?.showModal();if(e.target.closest("[data-close-approval]"))document.querySelector("#approval-dialog")?.close()});document.addEventListener("generationQueued",()=>{const d=document.querySelector("#approval-dialog"),p=d?.querySelector('[name="instructor_pin"]');if(p)p.value="";d?.close()});document.addEventListener("DOMContentLoaded",()=>{document.querySelector("#outage-dialog")?.showModal()});`) }