JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id="display" width="500" height="300"></canvas>

CSS

body {
background-color: #003100;
}
div.overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    filter: blur(3px);
    z-index: 1;
    background-image: url(http://i.imgur.com/8H9Aqme.png);
    box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
}
canvas {z-index: 10;position: relative;}

JavaScript

// G_TYPE_MAKE_FUNDAMENTAL
const G_TYPE_BOOLEAN = 5;
const G_TYPE_INT = 6;
const G_TYPE_INVALID = 0;
const G_TYPE_STRING = 16;
const NULL = null;
const TRUE = true;
const FALSE = false;

function xpm_template()
{
   this.button_layout = "O|HMC";
   this.button_offset = 3;
   this.button_spacing = 3;
   this.maximized_offset = 4;
   this.title_vertical_offset_active = 1;
   this.title_vertical_offset_inactive = 1;
   this.active_text_color = "#fcfcfc";
   this.inactive_text_color = "#f9fbfe";
   this.shadow_delta_x = -4;
   this.shadow_delta_y = -4;
   this.xpm = {};
   this.c = {};
   this.img = {};
   this.c.settings = [
      /* Do not change the order of the following parameters */
      ["active_text_color", NULL, G_TYPE_STRING, FALSE],
      ["inactive_text_color", NULL, G_TYPE_STRING, FALSE],
      ["active_text_shadow_color", NULL, G_TYPE_STRING, FALSE],
      ["inactive_text_shadow_color", NULL, G_TYPE_STRING, FALSE],
      ["active_border_color", NULL, G_TYPE_STRING, FALSE],
      ["inactive_border_color", NULL, G_TYPE_STRING, FALSE],
      ["active_color_1", NULL, G_TYPE_STRING, FALSE],
      ["active_hilight_1", NULL, G_TYPE_STRING, FALSE],
      ["active_shadow_1", NULL, G_TYPE_STRING, FALSE],
      ["active_mid_1", NULL, G_TYPE_STRING, FALSE],
      ["active_text_color_2", NULL, G_TYPE_STRING, FALSE],
      ["active_color_2", NULL, G_TYPE_STRING, FALSE],
      ["active_hilight_2", NULL, G_TYPE_STRING, FALSE],
      ["active_shadow_2", NULL, G_TYPE_STRING, FALSE],
      ["active_mid_2", NULL, G_TYPE_STRING, FALSE],
      ["inactive_color_1", NULL, G_TYPE_STRING, FALSE],
      ["inactive_hilight_1", NULL, G_TYPE_STRING, FALSE],
      ["inactive_shadow_1", NULL, G_TYPE_STRING, FALSE],
      ["inactive_mid_1", NULL, G_TYPE_STRING, FALSE],
      ["inactive_text_color_2", NULL, G_TYPE_STRING, FALSE],
      ["inactive_color_2", NULL, G_TYPE_STRING, FALSE],
      ["inactive_hilight_2", NULL, G_TYPE_STRING, FALSE],
      ["inactive_shadow_2", NULL,...