KingMcDonalds
1 line
5.5 KiB
HTML
1 line
5.5 KiB
HTML
<!doctype html> <html lang=en> <head> <meta charset=utf-8> <meta name=viewport content="width=480,initial-scale=1"> <style>@font-face{font-family:RadioFont;src:url('radios/default/fonts/CreatoDisplay.otf') format('opentype');font-weight:400;font-style:normal}*{margin:0;padding:0;box-sizing:border-box}body{width:480px;height:240px;background:#e8e8e9;font-family:RadioFont,Consolas,'Courier New',monospace;color:#464d49;overflow:hidden;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}body.dark{background:#08080a;color:#fff}.screen-content{flex:1;display:flex;flex-direction:column;min-height:0}.icon-row{display:flex;justify-content:space-between;align-items:center;padding:10px 30px 0 30px;flex-shrink:0}.icons-left,.icons-right{display:flex;align-items:center;gap:12px}.icon-row img{width:36px;height:36px;display:none;image-rendering:pixelated}.icon-row img.on{display:block}body.dark .icon-row img{filter:invert(100%) hue-rotate(180deg)}.lines-area{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0;padding:0 16px}.text-line{width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:40px;font-weight:900;line-height:46px;letter-spacing:.5px}.time-alert-row{flex-shrink:0;text-align:center;font-size:30px;font-weight:900;line-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-alert-row .time-text{padding:2px 16px 4px 16px}.time-alert-row .alert-text{display:none;padding:4px 0}.time-alert-row .alert-text.on{display:block}.time-alert-row .alert-text.on~.time-text{display:none}.btn-bar{flex-shrink:0;height:34px;background:#3a3d36;border-top:2px solid #2a2d26;display:flex}.btn-bar .btn-cell{flex:1;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;line-height:1;color:#e6efeb;border-right:2px solid #2a2d26}.btn-bar .btn-cell:last-child{border-right:none}body.dark .btn-bar{background:#2a2d28;border-top-color:#1a1d16}body.dark .btn-bar .btn-cell{color:#fff;border-right-color:#1a1d16}body.off{background:#1a1a1a}body.off .btn-bar,body.off .screen-content{display:none}</style> </head> <body> <div class=screen-content> <div class=icon-row> <div class=icons-left> <img id=ic-sig src=radios/AFX-1500/icons/sig_5.png> <img id=ic-scan src=radios/AFX-1500/icons/scan.png> <img id=ic-trunk src=radios/AFX-1500/icons/trunk.png> </div> <div class=icons-right> <img id=ic-warn src=radios/AFX-1500/icons/warn.png> <img id=ic-gps src=radios/AFX-1500/icons/gps.png> <img id=ic-batt src=radios/AFX-1500/icons/batt_5.png> </div> </div> <div class=lines-area> <div id=line1 class=text-line></div> <div id=line2 class=text-line></div> </div> <div class=time-alert-row> <div id=alert class=alert-text></div> <div id=time class=time-text></div> </div> </div> <div class=btn-bar> <div class=btn-cell id=btn1></div> <div class=btn-cell id=btn2></div> <div class=btn-cell id=btn3></div> <div class=btn-cell id=btn4></div> </div> <script>!function(){var t=function(t){return document.getElementById(t)},e=document.body,n=!0,s=null,a=!1,o=!1,i="",c="";function r(){return e.classList.contains("dark")?"#ffffff":"#464d49"}function l(e,n,s){var a=t(e);a&&(n?(a.classList.add("on"),s&&(a.src=s)):a.classList.remove("on"))}function u(){var e=t("alert"),n=t("time");s&&(clearTimeout(s),s=null),e.classList.remove("on"),e.textContent="",e.style.backgroundColor="",e.style.color="",n.style.display=""}window.addEventListener("message",function(d){!function(d){if(d&&d.action)switch(d.action){case"dispUpdate":if(!d.display)break;var f=d.display;if(a){var b=f.ln02||"";/^(TX|RX|SC): /.test(b)?(t("time").textContent=b,f.ln02=i||f.channel||"",o=!0):(i=b,o&&(o=!1,t("time").textContent=c))}t("line1").textContent=f.ln01||"",t("line2").textContent=f.ln02||"",t("btn1").textContent=f.btn01||"",t("btn2").textContent=f.btn02||"",t("btn3").textContent=f.btn03||"",t("btn4").textContent=f.btn04||"",n||!f.ln01&&!f.ln02||(n=!0,e.classList.remove("off"));break;case"setBatt":"hidden"===d.status||null==d.status?l("ic-batt",!1):l("ic-batt",!0,"radios/AFX-1500/icons/batt_"+d.status+".png");break;case"setSignal":"hidden"===d.status||null==d.status||!1===d.status?l("ic-sig",!1):l("ic-sig",!0,"radios/AFX-1500/icons/sig_"+d.status+".png");break;case"setGPS":l("ic-gps",!!d.status);break;case"setTrunk":l("ic-trunk",!!d.status);break;case"setScan":l("ic-scan",!!d.status);break;case"setWarn":l("ic-warn",!!d.status);break;case"setTime":c=d.time||"",o||(t("time").textContent=c);break;case"alert":var m=t("alert"),C=t("time");s&&(clearTimeout(s),s=null),d.message?(m.textContent=d.message,d.mode&&"none"!==d.mode&&"#"===d.mode.charAt(0)?(m.style.backgroundColor=d.mode,m.style.color="#FFFFFF"):(m.style.backgroundColor="transparent",m.style.color=r()),m.classList.add("on"),C.style.display="none",s=setTimeout(function(){u()},3e3)):u();break;case"setLED":break;case"setTheme":"Dark"===d.theme?e.classList.add("dark"):e.classList.remove("dark");break;case"setRadioConfig":d.model&&Promise.all([fetch("/client/radios/default/config.json").then(function(t){return t.json()}),fetch("/client/radios/"+d.model+"/config.json").then(function(t){return t.json()}).catch(function(){return{}})]).then(function(t){var e=Object.assign({},t[0],t[1]);a=!!e.useAlertLineTS,o=!1,i=""});break;case"powerOff":n=!1,e.classList.add("off"),t("line1").textContent="",t("line2").textContent="",t("btn1").textContent="",t("btn2").textContent="",t("btn3").textContent="",t("btn4").textContent="",t("time").textContent="",u(),document.querySelectorAll(".icon-row img").forEach(function(t){t.classList.remove("on")})}}(d.data)})}()</script> </body> </html> |