example-info HTML CG template

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>
    *,*:after,*:before{box-sizing:inherit}html,body{background:transparent;box-sizing:border-box;overflow:hidden;font-smooth:always;-webkit-font-smoothing:antialiased}#debug-window{z-index:1000;position:absolute;left:10%;right:10%;bottom:10%;background-color:rgba(0,0,0,0.9)}#debug-window li{font-family:monospace;font-size:28px;color:#cccccc}

    #container{position:absolute;top:5%;bottom:5%;left:5%;right:5%;font-family:Roboto,Helvetica,Arial}#info-bar{position:absolute;top:0;left:0;display:flex;flex-direction:column}#info-bar div{display:flex;flex-direction:row;overflow:hidden}#info-bar div span{padding:6px 14px}#info-bar div#header{color:#f0f0f0;background-color:#c01010;z-index:500;font-size:24px;font-weight:300}#info-bar div#line1,#info-bar div#line2{background-color:rgba(240,240,240,0.8);font-family:Roboto,Helvetica,Arial;font-size:20px;font-weight:300}.visible{visibility:visible}.visible #header{transition:.6s;opacity:1}.visible #line1,.visible #line2{transition:.6s;transition-delay:.6s;opacity:1}.hidden{visibility:hidden}.hidden #header{transition:.6s;transition-delay:.6s;transform:translateX(-100px);opacity:0}.hidden #line1,.hidden #line2{transition:.6s;opacity:0;transform:translateY(-40px)}

    </style><script>
        var param_map = {
   'f0' : 'header',
   'f1' : 'line1',
   'f2' : 'line2',
   'f3' : 'astra_category',
   'f4' : 'astra_output',
   'f5' : 'astra_layer',
}
    </script></head><body><ul id="debug-window"></ul><div id="container" class="hidden"><div id="info-bar"><div id="header"><span></span></div><div id="line1"><span></span></div><div id="line2"><span></span></div></div></div><script>
    var debug=false;function log(s){console.log(s)
if(debug){const li=document.createElement('li');li.innerText=s;dbg=document.getElementById("debug-window");dbg.appendChild(li);}}
window.onerror=function(msg){log('error '+msg);}
function parse_xml(xmlString){var parser=new DOMParser();var docError=parser.parseFromString('INVALID','text/xml');var parsererrorNS=docError.getElementsByTagName("parsererror")[0].namespaceURI;var doc=parser.parseFromString(xmlString,'text/xml');if(doc.getElementsByTagNameNS(parsererrorNS,'parsererror').length>0){throw new Error('Error parsing XML');}
return doc;}
function parse_params(str){var data={};try{data=JSON.parse(str)}catch(err){try{doc=parse_xml(str);var result={};var root_element=doc.documentElement;var children=root_element.childNodes;for(var i=0;i<children.length;i++){var child=children[i];var key=child.getAttribute("id");var data=child.getElementsByTagName("data")[0];var value=data.getAttribute("value");result[key]=value;}
data=result}catch(xmlerr){data={}}}
for(k in data){if(k in param_map){data[param_map[k]]=data[k]
delete data[k]}}
console.log(data)
return data}
function play(){}
function stop(){}
function next(){}
function update(data){}
var amcp_bridge_url="http://127.0.0.1:9731/amcp";function amcp(command){log("SENDING "+command)
var xhr=new XMLHttpRequest()
xhr.open('POST',amcp_bridge_url)
xhr.responseType="text"
xhr.send(command)
xhr.onload=function(){};xhr.onerror=function(){log("Status:"+xhr.status+" : "+xhr.statusText)
log(xhr.responseText)}}
    function play(){document.getElementById("container").setAttribute("class","visible");}
function stop(){document.getElementById("container").setAttribute("class","hidden");}
function update(data){var params=parse_params(data);for(var field_name in params){document.getElementById(field_name).querySelector("span").innerText=params[field_name];}}
    </script></body></html>