shinsh/WebCG
1
0
Fork 0
Code Actions Packages Releases Activity

Init WebCG

Browse Source
This commit is contained in:
shinsh
2026-08-12 14:21:28 +09:00
commit 5c01660f97
170 changed files with 46248 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/view-home.handlebars
+320
View File
@@ -0,0 +1,320 @@
<!DOCTYPE html>
{{>copyright }}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPX {{SPX.title}} | {{lang 'pagetitle.home'}}</title>
<link rel="icon" type="image/png" href="/img/spx-gc.ico">
<link rel="stylesheet" type="text/css" href="/css/spx_fonts.css">
<link rel="stylesheet" type="text/css" href="/css/spx_layout.css">
<link rel="stylesheet" type="text/css" href="/css/spx_forms.css">
<link rel="stylesheet" type="text/css" href="/css/spx_colors.css">
<script src="/js/fontawesome.all.min.js"></script>
<script src="/js/socket.io.js"></script>
<script src="/js/spx_gc.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/anime.min.js"></script>
<script>
function website() {
window.open('https://spxgraphics.com', '_spx');
}
function start() {
document.location = '/shows';
}
function appconfig() {
document.location = '/config';
}
</script>
<style>
.auto-resizable-iframe {
max-width: 100%;
margin: 0px auto;
}
.auto-resizable-iframe > div {
position: relative;
padding-bottom: 56.25%;
height: 0px;
background-color: #000000;
}
.auto-resizable-iframe iframe {
position: absolute;
background-color: #000000;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.box {
/* width: 150px; */
margin-right: 10px;
background: #00000088;
padding: 0.6em 1em;
text-align: center;
color: rgba(255, 255, 255, 0.671);
position: absolute;
bottom: 60px;
right: 50px;
font-size: 0.7em;
border-radius: 0.5em;
}
.sb4:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid #00000088;
border-top: 10px solid #00000088;
border-bottom: 10px solid transparent;
right: 19px;
bottom: -19px;
}
#upgradeinfo, #messageinfo {
display: block;
margin: 2.0em 0em 1.5em 0em;
border: 1px solid rgba(0, 0, 0, 0);
padding: 0.8em 2.5em 1.6em 2.0em;
border-radius: 0.5em;
font-size: 0.8em;
background-color: #ffffff17;
box-shadow: rgba(0, 0, 0, 0.418) 0px 0px 10px;
border-left: 8px solid rgba(229, 16, 16, 0)
}
.messagedate {
color: rgba(255, 255, 255, 0.493);
font-size: 0.8em;
margin-top: 0.4em;
margin-bottom: 0.0em;
}
.messageheadline {
color: #fff;
margin-top: 0.2em;
margin-bottom: 1.0em;
font-size: 1.5em;
}
.messagebody {
font-size: 0.7;
color: rgba(255, 255, 255, 0.685);
}
#messagelink, #notificationlink{
display: inline-block;
margin-top: 1em;
padding: 0.5em 1.2em;
border-radius: 0.0em;
font-size: 1.0em;
background-color: #00000081;
border-left: 4px solid #00000000;
color: rgba(255, 255, 255, 0.76);
}
#messagelink > a:link, #notificationlink > a:link {
font-size: 1.2em;
color: rgb(255, 255, 255);
margin: 0.5em 1.2em;
text-shadow: 0;
}
#messagelink > a:hover, #notificationlink> a:hover{
color: #e6dfd4;
text-decoration: underline;
}
/* none | upgrade | info | warning */
.message-upgrade { border-left-color: #e57010a6 !important; }
.message-info { border-left-color: #106ce5b4 !important; }
.message-warn { border-left-color: #e51010a9 !important; }
.message-none { border-left-color: #106ce5b4 !important; }
.greeting {
margin-top: 1em;
margin-bottom: 1em;
display: block;
padding: 12px;
background-color: rgba(72, 128, 212, 0.2);
color: #fff;
border-radius: 8px;
font-size: 1.0em;
text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 4px;
{{!-- border: 1px solid rgba(0, 0, 0, 0.384); --}}
border-left: 8px solid rgba(0, 140, 255, 0.76);
box-shadow: rgba(0, 0, 0, 0.267) 0px 0px 6px;
}
</style>
</head>
<body class="bg_body">
<div class="wrapper">
<div class="header">
{{>header page="home"}}
</div><!-- header ended -->
<div class="content">
<div class="centerColumn pM wrapper ">
<div id="itemList" class="content pM scroller" style="border: 0px solid yellow;">
{{#if message}}
<div class="message">{{message}}</div>
{{/if}}
{{#if error}}
<div class="messagerror">{{error}}</div>
{{/if}}
<table class="wide" border=0>
<TR>
<td class="vmid tableheaderText">
{{lang 'pagetitle.home'}}
{{#ifValue user "default"}}
<!--default user -->
{{else}}
{{user}}
{{/ifValue}}
</td>
<td class="vmid tableheaderHelp aright" title="{{lang 'general.help'}}" onClick="help('intro');"><i class="far fa-question-circle"></i>&nbsp;</td>
</TR>
</table>
<hr class="h2hr"><!-- =========================================== -->
<table style="width: 100%;" cellspacing="10" border="0">
<tr>
<td>
<div>
<img src="/img/SPX_glossy_255_Transparent_Shadow.png" style="height: 4.0em; float:right; margin-right: 1em;">
<h1 style="padding:0px; margin:0px; font-size: 1.0em;">SPX Graphics </h1>
<span class="spxInfotext" style="font-size: 0.8em; opacity:0.5;">
{{lang 'general.slogan'}}<BR>
</span>
</div>
<div style="clear:both;">&nbsp;</div>
{{#if greeting}}
<div class="greeting" id="greeting">{{greeting}}</div>
{{/if}}
<div class="spxFlexContainer">
<button onmouseover="tip('{{lang 'hover.navishows'}}');" class="spxformtext btn spxFlexItem bg_orange ripple" onclick="start();">{{lang 'button.launch'}}</button>
<button onmouseover="tip('{{lang 'hover.config'}}');" class="spxformtext btn spxFlexItem bg_grey15 ripple" onclick="appconfig()"><i class="fas fa-wrench"></i>&nbsp;{{lang 'button.config'}}</button>
<button onmouseover="tip('{{lang 'hover.docs'}}');" class="spxformtext btn spxFlexItem bg_blue ripple" onclick="help('/')">{{lang 'button.help'}}</button>
<button onmouseover="tip('spxgraphics.com');" class="spxformtext btn spxFlexItem bg_blue ripple" onclick="website()">website</button>
</div>
<!-- Notifications from the SPX messaging service: -->
<div class="message-upgrade" id="upgradeinfo" style="display:none">
<div class="messagedate" id="upgrade_date"></div>
<div class="messageheadline" id="upgrade_head"></div>
<div class="messagebody" id="upgrade_body"></div><BR>
<div id="notificationlink" class="message-upgrade"><span id="upgrade_call"></span><a href="" id="upgrade_link"></a></div>
</div>
<div class="message-info" id="messageinfo" style="display:none">
<div class="messagedate" id="message_date"></div>
<div class="messageheadline" id="message_head"></div>
<div class="messagebody" id="message_body"></div><BR>
<div id="messagelink" class="message-info"><span id="message_call"></span><a href="" id="message_link"></a></div>
</div>
<BR>
<!-- server / msgsrvs / notifications -->
<div id="promo" style="opacity: 0;">
<A id="homepagepromolink" href="https://spxgraphics.com/software" target="_mothership">
<img id="homepagepromopict" class="auto-resizable-iframe" SRC="/img/welcome-splash-tiers.png" alt="Splash screen promo">
</A>
</div>
</td>
</tr>
</table>
</div><!-- itemlist ended -->
</div><!-- center wrapper ended -->
</div><!-- content ended -->
{{>footer}}
<div class="box sb4">Questions or comments?</div>
</div><!-- MAINwrapper ended -->
<script>
const css1 =
"box-sizing: border-box;" +
"font-size: 12px;" +
"background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.3) 50%), linear-gradient(160deg, rgba(238, 255, 238, 0.5) 0%, #00aa00 20%, #112233 70%);" +
"border-bottom: 2px solid rgba(0,0,0,0.5);" +
"border-top: 2px solid rgba(255,255,255,0.5);" +
"border-left: 4px solid rgba(0,0,0,0.5);" +
"border-right: 2px solid rgba(255,255,255,0.2);" +
"margin: 2em 0;" +
"text-shadow: 0 2px 4px black;" +
"font-family: Arial;" +
"color: white;" +
"text-align: center;" +
"padding: 0.3em 2em;" +
"width: 300px;" +
"letter-spacing: 0.1em;" +
"border-radius: 1em;";
let YYYY = new Date().getFullYear();
const txt1 = "%c© " + YYYY + " SPX Graphics 👋 All Rights Reserved.";
console.log(txt1, css1);
// check for upgrade
document.getElementById('upgradeBubble').style.display="none";
heartbeat(202); // page identifier
{{#ifValue config.general.allowstats false}}
console.log('No version checking.');
{{else}}
// console.log('stats permitted');
getMessages('{{{curVerInfo}}}');
{{/ifValue}}
// fade in promo after a little delay
anime({
targets: '#promo',
easing: 'linear',
opacity: 1,
duration: 300,
delay: 200
});
// show message when page loaded
window.addEventListener('load', (event) => {
if ('{{showMessage}}'!='') {
hideMessageSlider();
setTimeout(function(){
showMessageSlider('{{showMessage}}','happy');
}, 100);
}
});
</script>
</body>
</html>