Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement