Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<!-- while sh -c `~/Applications/nwjs-v0.12.1-linux-x64/nw .`; do true; done -->
<title>bootlaunch</title>
<style>
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    position: absolute;
    background: #b0b0b0;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    display: block;
    font: 13px Helvetica;
    transition: background-color 700ms;
}

menu {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%, -50%);
}

menuitem {
    position: relative;
    display: inline-block;
    padding: 0 13px;
}

menuitem > img {
    position: absolute;
    display: block;
    top: 70px;
    left: 20px;
    width: 128px;
    padding: 0;
    transform: translateY(-50%);
    margin: auto 0;
    filter: drop-shadow(0 4px 2px #606060);
    -webkit-filter: drop-shadow(0 4px 2px #606060);
    opacity: 1;
    transition: opacity 700ms;
}

menuitem[data-selected] > img {
    transition: opacity 700ms ease 300ms;
}

label {
    display: block;
    margin-top: 152px;
    width: 144px;
}

#selection-highlight {
    transition: transform 300ms, opacity 700ms ease 300ms;
}

#selection-highlight, #selection-cursor {
    position: absolute;
    transform: translateX(0);
    transition: transform 300ms;
}

#selection-highlight, #selection-cursor-interior {
    background: #808080;
    border: solid 2px #eaeaea;
}

#selection-highlight {
    padding: 6px;
    width: 128px;
    height: 128px;
    border-radius: 12px;
}

#selection-cursor {
    width: 144px;
    box-sizing: border-box;
}

#selection-cursor-interior {
    display: inline-block;
    font: 28px Wingdings;
    color: white;
    border-radius: 100%;
    padding: 1px 6px 6px;
    margin: 6px 0 0 0;
    transition: opacity 700ms ease 300ms;
}
</style>
</head>
<body>
<menu><!--
    --><menuitem data-selected>
        <div id=selection-highlight></div>
        <img src=desktop.jpeg>
        <label>Desktop</label>
        <div id=selection-cursor><span id=selection-cursor-interior>ïƒ©</span></div>
    </menuitem><!--
    --><menuitem>
        <img src=kodi.png>
        <label>Kodi</label>
    </menuitem><!--
    --><menuitem>
        <img src=logo_es.png>
        <label>Emulation Station</label>
    </menuitem><!--
--></menu>
<script>
var selectedIndex = 0;
var itemCount = document.getElementsByTagName('menuitem').length;

function launch() {
    var path = [
        "xcalc",
        "xcalc",
        "xcalc"
    ][selectedIndex];
    process.stdout.write(path + "\n");
    process.exit();
}

function select() {
    document.body.style.backgroundColor = 'black';
    var menuItemImages = document.querySelectorAll("menuitem > img");
    for (var i = 0; i < menuItemImages.length; i++)
        menuItemImages[i].style.opacity = 0;
    document.getElementById('selection-highlight').style.opacity = 0;
    document.getElementById('selection-cursor').style.opacity = 0;

    setTimeout(launch, 1200);
}

function move(direction) {
    document.getElementsByTagName('menuitem')[selectedIndex].removeAttribute('data-selected');

    switch (direction) {
    case 'left':
        selectedIndex = selectedIndex == 0 ? itemCount - 1 : selectedIndex - 1;
        break;
    case 'right':
        selectedIndex = (selectedIndex + 1) % itemCount;
        break;
    }

    document.getElementsByTagName('menuitem')[selectedIndex].setAttribute('data-selected',
                                                                          'data-selected');

    var transform = "translateX(" + ((144 + 13 + 13) * selectedIndex) + "px)";
    document.getElementById('selection-highlight').style.transform = transform;
    document.getElementById('selection-cursor').style.transform = transform;
}

function keydown(event) {
    switch (event.keyCode) {
    case 13:
        select();
        break;
    case 37:
        move('left');
        break;
    case 39:
        move('right');
        break;
    }
}

var gamepadState = [];

function pollGamepads() {
    var gamepads = navigator.getGamepads();
    for (var i = 0; i < gamepads.length; i++) {
        var gamepad = gamepads[i];
        if (gamepad == null)
            continue;
        if (gamepadState[i] == null) {
            gamepadState[i] = {
                buttons: [],
                axes: [],
            };
        }
        if (gamepad.axes.length >= 1 && gamepad.axes[0] < -0.5 && gamepadState[i].axes[0] == 0.0)
            move('left');
        if (gamepad.axes.length >= 1 && gamepad.axes[0] > 0.5 && gamepadState[i].axes[0] == 0.0)
            move('right');
        if (gamepad.buttons.length >= 16 && gamepad.buttons[15].pressed && !gamepadState[i].buttons[15])
            move('right');
        if (gamepad.buttons.length >= 17 && gamepad.buttons[16].pressed && !gamepadState[i].buttons[16])
            move('left');
        if (gamepad.buttons.length >= 10 && gamepad.buttons[9].pressed && !gamepadState[i].buttons[9])
            select();

        for (var j = 0; j < gamepad.axes.length; j++)
            gamepadState[i].axes[j] = gamepad.axes[j];
        for (var j = 0; j < gamepad.buttons.length; j++)
            gamepadState[i].buttons[j] = gamepad.buttons[j].pressed;
    }
}

document.body.addEventListener('keydown', keydown, false);
window.setInterval(pollGamepads, 50);

</script>
</body>
</html>