mma-website/website.js
Mahesh Asolkar 0e71c26051 Added support for up to 5 links in header
Use SITE_LINK_NAME_n/SITE_LINK_URL_n environment variables to set the
links
2023-01-02 13:29:17 -08:00

304 lines
8.0 KiB
JavaScript

'use strict';
const http = require('http');
// ----------------------------------------------------------------------
const hostname = '0.0.0.0';
const port = 3000;
// ----------------------------------------------------------------------
var siteinfo = require('./siteinfo.js');
// ----------------------------------------------------------------------
function getPage(req) {
var route = req.url.substring(1);
var website = siteinfo.site_info(req);
var ga_tracking_stub = siteinfo.site_ga_stub(req);
console.log(`Serving route ${route}`);
var page = `<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>${website.title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="${website.title}">
<meta name="keywords" content="">
<!-- Mobile stylesheet -->
<style type="text/css" media="handheld">
body {
font-family : "Trebuchet MS", sans-serif;
font-size : 13px;
background-color : white;
color: gray;
margin : 0 0 0 0;
}
* {
visibility : visible;
overflow : auto;
margin : 0;
padding : 0;
}
img {
display : none;
}
</style>
<!-- All other media -->
<style type="text/css" media="screen">
body {
font-family : "Trebuchet MS", sans-serif;
font-size : 13px;
background-color : white;
margin : 0 0 0 0;
}
#osc_txt {
margin: 0pt auto;
display: block;
width: 600px;
font-size: 64px;
font-weight: bold;
text-align: center;
vertical-align: middle;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 3px solid #eeeeee;
border-top: 3px solid #eeeeee;
}
#col_1, #col_2, #col_3, #col_4, #col_5 {
text-align: center;
padding-top: 6px;
font-weight: bold;
}
#col_1 {
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
font-size: 30px;
}
#col_2 {
opacity: .8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font-size: 25px;
}
#col_3 {
opacity: .6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
font-size: 20px;
}
#col_4 {
opacity: .4;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
font-size: 16px;
}
#col_5 {
opacity: .2;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
font-size: 12px;
}
/* Navigation strip */
#nav_strip {
/*float: right;*/
text-align: center;
margin-top: 150px;
margin-bottom: 20px;
color: #bbbbbb;
}
#nav_strip a {
color: #777777;
text-decoration: none;
}
#nav_strip a:hover {
color: #77aa77;
text-decoration: underline;
}
/* Setlist, control */
#foot {
position: fixed;
bottom: 5px;
text-align: center;
color: #cccccc;
width: 100%;
}
#setlist a, #control a {
color: #777777;
text-decoration: none;
}
#setlist a:hover, #control a:hover {
color: #77aa77;
text-decoration: underline;
}
</style>
<script type="text/javascript">
//<![CDATA[
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var rd = {val:0, max:0, min:0, step:0, trend:1, itr:0};
var gr = {val:0, max:0, min:0, step:0, trend:1, itr:0};
var bl = {val:0, max:0, min:0, step:0, trend:1, itr:0};
var col_update_timer = 50;
var color_display = 'dot';
var player_state = 'play';
function advance_color(clr) {
if ((clr.itr == 0) && (clr.trend == 1)) {
clr.min = Math.ceil(Math.random() * 50);
clr.max = 206 + (Math.ceil(Math.random() * 50));
clr.val = clr.min;
clr.step = 1;
}
if (clr.trend == 1) {
clr.itr ++;
if (clr.itr < (clr.max - clr.min)) {
clr.val += clr.step;
} else {
clr.val -= clr.step;
clr.trend = 0;
}
} else {
clr.itr --;
if (clr.itr > 0) {
clr.val -= clr.step;
} else {
clr.val += clr.step;
clr.trend = 1;
}
}
}
function random_colorize_job () {
var item = document.getElementById ("osc_txt");
advance_color (rd);
advance_color (gr);
advance_color (bl);
item.style.color = "rgb("+rd.val+","+gr.val+","+bl.val+")";
if (color_display == 'rgb') {
color_str = item.style.color;
} else if (color_display == 'dot') {
color_str = "&bull; &bull; &bull; &bull;";
} else {
color_str = "#" + rd.val.toString(16) + gr.val.toString(16) + bl.val.toString(16);
}
col_update_timer--;
if (col_update_timer == 0) {
col_update_timer = 50;
document.getElementById ("col_5").innerHTML = document.getElementById ("col_4").innerHTML;
document.getElementById ("col_5").style.color = document.getElementById ("col_4").style.color;
document.getElementById ("col_4").innerHTML = document.getElementById ("col_3").innerHTML;
document.getElementById ("col_4").style.color = document.getElementById ("col_3").style.color;
document.getElementById ("col_3").innerHTML = document.getElementById ("col_2").innerHTML;
document.getElementById ("col_3").style.color = document.getElementById ("col_2").style.color;
document.getElementById ("col_2").innerHTML = document.getElementById ("col_1").innerHTML;
document.getElementById ("col_2").style.color = document.getElementById ("col_1").style.color;
// document.getElementById ("col_1").innerHTML = item.style.color;
document.getElementById ("col_1").innerHTML = color_str;
document.getElementById ("col_1").style.color = item.style.color;
}
}
function random_colorize() {
if (player_state == 'play') {
random_colorize_job();
}
tmot = setTimeout("random_colorize()",20);
}
function initialize () {
change_display(color_display);
random_colorize();
}
function change_display (elem) {
color_display = elem;
if (color_display == 'rgb') {
document.getElementById('rgb_ln').style.fontWeight = 'bold';
document.getElementById('hex_ln').style.fontWeight = 'normal';
document.getElementById('dot_ln').style.fontWeight = 'normal';
} else if (color_display == 'dot') {
document.getElementById('rgb_ln').style.fontWeight = 'normal';
document.getElementById('hex_ln').style.fontWeight = 'normal';
document.getElementById('dot_ln').style.fontWeight = 'bold';
} else {
document.getElementById('rgb_ln').style.fontWeight = 'normal';
document.getElementById('hex_ln').style.fontWeight = 'bold';
document.getElementById('dot_ln').style.fontWeight = 'normal';
}
}
function toggle_play () {
if (player_state == 'play') {
player_state = 'pause';
document.getElementById('pp_button').innerHTML = 'Play';
} else {
player_state = 'play';
document.getElementById('pp_button').innerHTML = 'Pause';
}
}
//]]>
</script>
</head><body onload="initialize()">
<div id="nav_strip">
<a href="${website.url}" title="Home">Home</a>`;
website.links.forEach((lnk) => {
page += `
&bull; <a href="${lnk.url}" title="${lnk.name}">${lnk.name}</a>`;
});
page += `
</div>
<div id="osc_txt">
${website.name}
</div>
<div id="col_1"></div>
<div id="col_2"></div>
<div id="col_3"></div>
<div id="col_4"></div>
<div id="col_5"></div>
<div id="foot">
<div id="control">
<a href="javascript:toggle_play()" title="Toggle Play" id="pp_button">Pause</a>
</div>
<div id="setlist">
<a href="javascript:change_display('rgb')" title="Display colors in RGB values" id="rgb_ln"> RGB</a> &bull;
<a href="javascript:change_display('hex')" title="Display colors in Hex values" id="hex_ln"> Hex</a> &bull;
<a href="javascript:change_display('dot')" title="Display colored dots" id="dot_ln"> Dots</a>
</div>
</div>
${ga_tracking_stub}
</body>
</html>`;
return page;
}
// ----------------------------------------------------------------------
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.write(getPage(req));
res.end();
console.log(`Serviced request ${req}`);
}).listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});