Compare revisions

Zayd Radha · jjlustig · jjlustig · jjlustig · jjlustig · Zayd
--- a/.gitignore
+++ b/.gitignore
 public/vendor/
 node_modules/
+custom_configs/*
+dist/
--- a/Omega_binaries/uBoard-1.0.0-mac-x64/uBoard.zip
+++ b/Omega_binaries/uBoard-1.0.0-mac-x64/uBoard.zip
--- a/README.md
+++ b/README.md
-uBoard
+# uBoard

-# Install
+A customizable mobile interface to control desktop mouse and keyboard commands
+
+See our demo: https://www.youtube.com/watch?v=86RU1N75gOM&feature=youtu.be
+
+# Setup

 Open your mobile browser by scanning the QRCode or enter the URL, then you are able to control your desktop via browser.

-## Features

-### Passcode protection
+## Installation

-## Setup
+
+To run the uBoard server you must have the following installed: 
+1. nodejs (7.5 or above)
+2. npm (5.6.0 or above)
+3. bower (1.8.2 or above)

 Get required packages

@@ -26,36 +33,101 @@ $ node server.js

 To host the uBoard server on the desktop.

+Next, locate your desktop network IP address. To access the mobile component, open a web browser on a mobile device 
+and navigate to the IP address of your computer, port 8000
+
+If you are running the desktop executable, you can scan the qr code which will contain the same address
+
+Make sure your mobile device and desktop are running on the same router
+
 ## Code structure

 The server uses `server.js` and the `socket.io` to change the mouse position and receive keyboard input 

-The desktop uses `desktop.html` to display the QR code on the desktop window.
+The desktop uses `desktop.html` to display the QR code on the desktop window. (NOT FULLY IMPLEMENTED YET)
+
+For the client side, a mobile device will receive `index.html` and its attached `client.js`. 
+This allows the User to input the keyboard (bottom half of screen) or move the mouse (top half of screen) and emit a WebSocket signal to the server.
+
+## Usage Guide
+
+### Touchpad
+
+The touchpad portion of the interface allows for the following mouse gestures.
+* **[Desktop input - Touchpad gesture]**
+* Left click - Single one finger tap
+* Right click - Single two finger tap
+* Double click - Double one finger tap
+* Mouse movement - One finger drag
+* Scrolling - Two finger drag
+* Drag and Drop - Three finger drag
+
+### Keyboard
+
+On tapping buttons on the keyboard, the keys should be typed on your desktop
+
+The following special character keys are current placeholders for utility keys
+
+* @ - Enter
+* # - Space
+* * - Backspace
+
+The placement and content of the keys can be manipulated by turning on the 'Movable' toggle in the navigation bar.
+
+Once in edit mode, you can drag and drop the placement of keys to change their position. 
+You can also hold down on a key to update the string content of the key, and save the
+current placement and content of the key.

-For the client side, a mobile device will receive `index.html` and its attached `client.js`. This allows the User to input the keyboard (top half of screen) or move the mouse (bottom half of screen) and emit a WebSocket signal to the server.
+Once saved, anytime you run the application from your current desktop, the mobile
+device will load the keyboard layout you set.

-## Build for Desktop
+## Additional Setup

-You need install node-webkit-builder first
+Additionally your desktop will need to have the appropriate c++ and python libraries

+python2 is required to run the robotjs library. Xcode c++ libraries are required to compile robotjs
+
+To install the required c++ Libraries:
+
+On Mac, run
+
+```
+xcode-select --install
+```
+
+On windows, (TODO)
+
+```
+TODO: Fill this in
 ```
-$ npm install nw-builder -g
+
+### Building Executable
+
+Clear packages and update to nodejs version 9.x.x
+
+```
+$ rm -rf node_modules
+$ rm -rf public/vendor
+$ nvm install 9
 ```

-You have to check nw.js website and use same io.js version as nw.js did.
+Install nwjs and builder
+
+```
+$ npm install -g nwjs
+$ npm install nwjs-builder-phoenix --save-dev
+
+```
+Create executable (dist for all platforms, dist-mac for just macOS)

 ```
-$ nvm install iojs-1.2.0
-$ nvm use iojs
+$ npm run dist(-mac)
 ```

-To build a smaller package, we only need install essential libraries for production.
-Clone a new repository and run following commands:
+Run app from exe (runs macOS version)

 ```
-$ npm install --production
-$ nwbuild -p osx64 webbymouse -v 0.12.3
+$ npm start
 ```

-NOTE: Your desktop OS must have the needed support for the robotjs library. 

--- a/bower.json
+++ b/bower.json
@@ -16,6 +16,9 @@
    "hammerjs": "~2.0.4",
    "l20n": "~1.0.2",
    "bootstrap": "~3.3.5",
-    "jquery-qrcode": "*"
+    "swiper": "^4.1.6",
+    "favicon": "^0.0.3",
+    "jquery-qrcode": "*",
+    "bootstrap-toggle": "^2.2.2"
  }
 }
--- a/configuration.json
+++ b/configuration.json
@@ -51,87 +51,82 @@
    ],
    "button11": [
        "a",
-        "0",
+        "4",
        "30"
    ],
    "button12": [
        "s",
-        "10",
+        "14",
        "30"
    ],
    "button13": [
        "d",
-        "20",
+        "24",
        "30"
    ],
    "button14": [
        "f",
-        "30",
+        "34",
        "30"
    ],
    "button15": [
        "g",
-        "40",
+        "44",
        "30"
    ],
    "button16": [
        "h",
-        "50",
+        "54",
        "30"
    ],
    "button17": [
        "j",
-        "60",
+        "64",
        "30"
    ],
    "button18": [
        "k",
-        "70",
+        "74",
        "30"
    ],
    "button19": [
        "l",
-        "80",
+        "84",
        "30"
    ],
    "button20": [
        "z",
-        "0",
+        "9",
        "60"
    ],
    "button21": [
        "x",
-        "10",
+        "19",
        "60"
    ],
    "button22": [
        "c",
-        "20",
+        "29",
        "60"
    ],
    "button23": [
        "v",
-        "30",
+        "39",
        "60"
    ],
    "button24": [
        "b",
-        "40",
+        "49",
        "60"
    ],
    "button25": [
        "n",
-        "50",
+        "59",
        "60"
    ],
    "button26": [
        "m",
-        "60",
-        "60"
-    ],
-    "button0": [
-        " ",
-        "70",
+        "69",
        "60"
    ]
 }
\ No newline at end of file
--- a/custom_configs/order
+++ b/custom_configs/order
--- a/default_configuration.json
+++ b/default_configuration.json
@@ -51,87 +51,82 @@
    ],
    "button11": [
        "a",
-        "0",
+        "4",
        "30"
    ],
    "button12": [
        "s",
-        "10",
+        "14",
        "30"
    ],
    "button13": [
        "d",
-        "20",
+        "24",
        "30"
    ],
    "button14": [
        "f",
-        "30",
+        "34",
        "30"
    ],
    "button15": [
        "g",
-        "40",
+        "44",
        "30"
    ],
    "button16": [
        "h",
-        "50",
+        "54",
        "30"
    ],
    "button17": [
        "j",
-        "60",
+        "64",
        "30"
    ],
    "button18": [
        "k",
-        "70",
+        "74",
        "30"
    ],
    "button19": [
        "l",
-        "80",
+        "84",
        "30"
    ],
    "button20": [
        "z",
-        "0",
+        "9",
        "60"
    ],
    "button21": [
        "x",
-        "10",
+        "19",
        "60"
    ],
    "button22": [
        "c",
-        "20",
+        "29",
        "60"
    ],
    "button23": [
        "v",
-        "30",
+        "39",
        "60"
    ],
    "button24": [
        "b",
-        "40",
+        "49",
        "60"
    ],
    "button25": [
        "n",
-        "50",
+        "59",
        "60"
    ],
    "button26": [
        "m",
-        "60",
-        "60"
-    ],
-    "button0": [
-        " ",
-        "70",
+        "69",
        "60"
    ]
 }
\ No newline at end of file
--- a/numpad.json
+++ b/numpad.json
+{
+    "pad1": [
+        "0",
+        "0",
+        "0"
+    ],
+    "pad2": [
+        "1",
+        "10",
+        "0"
+    ],
+    "pad3": [
+        "2",
+        "20",
+        "0"
+    ],
+    "pad4": [
+        "3",
+        "30",
+        "0"
+    ],
+    "pad5": [
+        "4",
+        "40",
+        "0"
+    ],
+    "pad6": [
+        "5",
+        "50",
+        "0"
+    ],
+    "pad7": [
+        "6",
+        "60",
+        "0"
+    ],
+    "pad8": [
+        "7",
+        "70",
+        "0"
+    ],
+    "pad9": [
+        "8",
+        "80",
+        "0"
+    ],
+    "pad10": [
+        "9",
+        "90",
+        "0"
+    ],
+    "pad11": [
+        "-",
+        "0",
+        "30"
+    ],
+    "pad12": [
+        "/",
+        "10",
+        "30"
+    ],
+    "pad13": [
+        ":",
+        "20",
+        "30"
+    ],
+    "pad14": [
+        ";",
+        "30",
+        "30"
+    ],
+    "pad15": [
+        "(",
+        "40",
+        "30"
+    ],
+    "pad16": [
+        ")",
+        "50",
+        "30"
+    ],
+    "pad17": [
+        "$",
+        "60",
+        "30"
+    ],
+    "pad18": [
+        "&",
+        "70",
+        "30"
+    ],
+    "pad19": [
+        "@",
+        "80",
+        "30"
+    ],
+    "pad20": [
+        "\"",
+        "0",
+        "60"
+    ],
+    "pad21": [
+        ".",
+        "10",
+        "60"
+    ],
+    "pad22": [
+        ",",
+        "20",
+        "60"
+    ],
+    "pad23": [
+        "?",
+        "30",
+        "60"
+    ],
+    "pad24": [
+        "!",
+        "40",
+        "60"
+    ],
+    "pad25": [
+        "'",
+        "50",
+        "60"
+    ],
+    "pad26": [
+        "#",
+        "60",
+        "60"
+    ],
+    "pad27": [
+        "%",
+        "70",
+        "60"
+    ],
+    "button28": [
+        "*",
+        "80",
+        "60"
+    ],
+    "button29": [
+        "=",
+        "90",
+        "60"
+    ]
+}
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -17,12 +17,21 @@
  "chromium-args": "--child-clean-exit",
  "dependencies": {
    "express": "^4.13.3",
-    "openurl": "^1.1.1",
+    "opn": "^5.2.0",
    "robotjs": "^0.4.7",
    "socket.io": "^1.3.6"
  },
  "scripts": {
-    "start": "node server.js",
-    "postinstall": "bower install"
+    "postinstall": "bower install",
+    "dist-mac": "build --tasks mac-x64 --mirror https://dl.nwjs.io/ .",
+    "dist": "build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",
+    "start": "run --mac-x64 --mirror https://dl.nwjs.io/ ."
+  },
+  "devDependencies": {
+    "nwjs-builder-phoenix": "^1.14.6"
+  },
+  "build": {
+    "nwVersion": "0.28.2",
+    "packed": true
  }
 }
--- a/public/.DS_Store
+++ b/public/.DS_Store
--- a/public/client.html
+++ b/public/client.html
@@ -12,76 +12,126 @@

    <title>UBoard</title>
  </head>
-  <body>
-    <header class="navbar navbar-inverse navbar-fixed-top shadow-z-2" role="navigation">
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#pushMenu">
-          <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand" href="#" data-l10n-id="projectName">uBoard</a>
+  <body>  
+
+    <div class="wrapper">
+      <div class="touchpad" id="touchpad">
+        <div class="touchpad" id="leftClick"><span class="glyphicon glyphicon-move"> </div>
+        <div class="touchpad" id="scrollWheel"><!--<span class="glyphicon glyphicon-sort">--><span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQkSURBVGhD7dp/6E9XHMfxL0aI5MdokZBfES1TUxMjRH4mpYQiv7JZyR9DC8XCWCv5MUrKry0hheQfmvVl2UL5tRKmzCKN+VF+judL3Xo7nfv5fM793Pu5n+RVj/LVveeecz/nnns+53xqUkwjDMcqHMV13MMrPMQ/+AWbMBEtUVXpjh9xH6p0qZ7hAAYj13yEXXgJX0VD1OITVDyT8R98lYo8wJ/4AxdwB77jIrohK/EBMk89qI/7KvIE6ipT0B6+tMBobMG/8JXzK3RcZlEj9sC9sO7kNvgq3xfrMe3NX2+nCZZBA4Fb5kV8iNRTB9vhXlBdphd8+RSPER27EL60gT5JW66cQzOkmvlwL3QITeGLGuc+E//D98kodfEtdIw9Zy9Sy8d4CnuBn6Cu5ktn3II9PvIC4xGXr+CeMwNlR11KQ6Mt+DQaw5d2uAF7vEs3ZQjishn2+Lso+3kZB1uoXnqqrC8NoOHWHh9Hz05X+KJyfoc9fg3KyinYAhcjLhq17LHFzEZcPoc9ViNbcyRKT9jC/kZcl1Lq4zJ0rN4peuvb8w9D8y39WxWL+0SiaDCx5xdqeMEshy2o0KcRRRPHSeiBkbDn663dGlOh6U2xDIQ9/xgSxX3IOyIkvoaERAPNTUTn61PWjQqK5jt2yL2KUqKh9wfMgztQqCGavu/GBJSSHbBlfIagdIEtYB+KRXdQDY7OsXfT/VsvPr2fisV9EU9HUAbAFlDK8KeP/TnseYWMQbGMhT3nGwTF7d+lFqBphj0vzkk0RLG4D/xqBMVtSNyEz4261wrYc13HETdHc9Mf9tyNCErShkTRw+775ngQISNP7g1RZsKWoYUHvTRDUhUNURbhCn5DN/1HYKqmIeUm9Ybsx6wcfAdbj7IbUi3eN6TavH9GIu/MqKX3QR5xG/I9gqIVcluAtgryyCjYeixFUHrDFrATeWQObD3mIiia2NlJ31nkkQ2wDSm0HhYbretGBahRma6Qx0SL2bYOiXa5tIoeFSKazVYyWomx10/cKwbBFnQG+uJUqbg3MvhrbhStkP8FW5jWrCoRrcZojzG6rrpV6HLUW/kStiHXELy2lCBatbHX/RllRZV2V9ezHoo1xNrr6ZPR81J23CUZ+RpZRM+luxej+VZq2QpbuPqs1oLTfPj1FtdOsL2ORqpUu7JW4fW9215E1HcLrdCXEg0qmsvZF7Bo604PferRrlG0bWBpm03bY0n2x4dCw7pbpj4ZbaZmllbQ1pt7YdFu1QJ0QqGoDG0taKHOV472UPog82ip093nc2mkOwL9MGAtdLyG1Etwu5B1Am1R0QyD1qx8FQqlXxF9AT0vuUQrh9o71532VbCY21iCxPuDWUS/7tF2XS0ewVdxvdzOYx1GIG6vvqqivq7NnH5QIzsgo1/+1NS8BnyN3ChEGkWcAAAAAElFTkSuQmCC"></span></div> 
+        <div class="touchpad" id="rightClick"><span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAPDSURBVGhD7dpZyA1/HMfxxy5biCiRvzV7si8XtgsXSMQFigspFBeSPVvhAsWFNTeKkhIShSLLjTWSolwga0hEdv/3R8/Ut19z5pzfzG+ecy6eT72Seeb5znybmd+Z8/s9VRWYJfiGFxiiDeVMc7RFK9TXBo98xt9qp7XBST10qf43aFpjDg7hLr4iOhH5g6c4h1UYiKTY372qDSYd8RD62QO0ROYMxjHoNrAHL4VOYjEaw40aj/a7og3VURNPYOvMQup0xknYgmnpOdDVrIMouqrRz3dqA2mGx7C/+wvFrm7BzMcX2IKu1zHbijkLPVNKV+zHNjTRBjIJdn9dtYXwjh6sg7DFIt9xBFPQDv0Qt18xz9EXcdFdED17mZo4DvfAP7AV7WGTthH5gKGIyyBswJh//0sRjUbuAW+jP+KSpRF5i24ImkVwD6SxPW60iZK1EbmP6Pmw0aAwF3p+ZDX0TCWmJ9yhVcNtAyQlRCOyC25WwN1PV7AFCuYC7C/cQdKViBKqkbjh9QTi9i04DI+D3fETeqCUhGpEzsBmIn7C7qNP/4KvQXqdsDuvR6kJ2YiGWtWz6YDxmAC9XRR859KrwG9ExT7C550mZCOyHamyFLZQ9JpQakI38gypouHVFhoLn4RuRLrDOy8RFdB3g0bwSR6NzIZXNB7bAjfgmzwa2Qiv6BLaAqfgmzwa2Qev6IPFFtAbr2/yaERv114ZDVtgD3xT20iC2kYil7HAk0YYWyOEzI1UitpGKk1ZnpEQVsKeR+ZG0oxaIdIJ9jy8G9GUiy1Qrkb+gz0P70Y04WALHEY5MgD2PA7AK5pZtwUuoRxxp0i3wDvvEBXQVIudYK6paL7KNjIP3jkPW6QPajruVFShWc3EuEOfzwxKiLSB5pWj479BqrtC81e2Ec2SlzIxFyrubaUlhtS5DltsOWoiuhqafrLHHonUmQZbTNP9GtHyjuZ77XGvIVPq4hZs0YsIvpJqMhV2/VB8p6JiMwyaSLaFdyOP6MuYXZaWowiWzbDFRZffd+08KaPgrjtqOTvoraxbSQuV9iCiz5oQB9LiqrsGo8XWQstvmaKVI3cUk/dYhjRD83DoK4JbUwurk5FbmiLuyogmmdehF5KiWcyZ0Nyy+1CL1mC0XJB7dJttgl1ycL2CXi80sadZ/L3Qct09uAOHpT8SSDVRnSW6LbQMF3dCvrR2vgYNUZboc2YGbiLuBIvRB+wO6A8MKia9sRb67uK+XkR0Wz2CviBNh+9SRVmiv4TQa/cI6KuzFv9zvnWqqv4H+9yZYR0wlL0AAAAASUVORK5CYII="></span> </div> 
+        <div class="touchpad" id="mousepad"> </div> 
      </div>
-      <div class="collapse navbar-collapse" id="pushMenu">
-        <ul class="nav navbar-nav">
-          <!--<li>
-            <div class="togglebutton">
-            <label class="navbar-item">
-            <input type="checkbox" name="checkbox" id="fullscreen-toggle" autocomplete="off"></input>
-            Touchpad <span class="toggle pull-right"></span>
-            </label>
+      
+      <div class="swiper-container">
+        <div class="swiper-wrapper"> 
+          <div class = "keyboard swiper-slide swiper-slide-outer" id="keyboard"> </div>
+          <div class = "numpad swiper-slide  swiper-slide-outer" id="numpad"> </div>
+          <div class = "textfield swiper-slide swiper-slide-outer" id="textfieldcontainer">
+            <textarea class= "textfield" id="textfield" type="text" placeholder="Type here and press enter to send to desktop"></textarea>
+          </div>
+          <div class = "hotkeys swiper-slide  swiper-slide-outer" id="hotkeys"> </div>
+          <div class="swiper-slide swiper-slide-outer">
+            <select id="customSelect">
+            </select>
+            <div class="swiper-container-inner">
+              <div class="swiper-wrapper" id="custom-container">
+              </div>
            </div>
-          </li>--> 
-          <li>
-            <div class="togglebutton">
-            <label class="navbar-item">
-            <input type="checkbox" name="checkbox" id="move-toggle" autocomplete="off"></input>
-            Move Buttons <span class="toggle pull-right"></span>
-            </label>
-            </div>
-          </li>
-          <li class="hidden" id="portrait">
-            <a href="#">
-            <i class="mdi-communication-stay-current-portrait"></i> Portrait
-            </a>
-          </li>
-          <li class="hidden" id="landscape">
-            <a href="#">
-              <i class="mdi-communication-stay-current-landscape"></i> Landscape
-            </a>
-          </li>
-          <li class="divider"></li>
-          <li><a href="#" id="passcode"><i class="mdi-notification-vpn-lock"></i> Pass Code</a></li>
-          <li class="divider"></li>
-        </ul>
+          </div>
+        </div>
+        <div class = "loading" id="loading">Loading...</div>
+        <div class = "static-bar">
+          <div class = "shift-toggle static-key static-key-default" id = "shift-toggle"> shift </div> 
+          <div class = "ctrl-toggle static-key static-key-default" id = "ctrl-toggle"> ctrl </div> 
+          <div class = "spacebar static-key static-key-default" id = "spacebar"> space </div>
+          <div class = "go-toggle static-key static-key-default" id = "go-toggle"> Go </div>  
+          <div class = "backspace static-key static-key-default" id = "backspace"> del </div> 
+        </div>
      </div>
-    </header>
-    <div class="wrapper">
-      <div class = "keyboard" id="keyboard">
+
+      <div class = "navbar" id="navbar">
+        <div class = "icon-selection" id="s0">
+          <i class="material-icons">keyboard</i>
+        </div>
+        <div class = "icon-selection" id="s1">
+          <i class="material-icons">grid_on</i>
+        </div>
+        <div class = "icon-selection" id="s2">
+          <i class="material-icons">smartphone</i>
+        </div>
+        <div class = "icon-selection" id="s3">
+          <i class="material-icons">link</i>
+        </div>
+        <div class = "icon-selection" id="s4">
+          <i class="material-icons">build</i>
+        </div>
+        <div class = "icon-selection" id="swap">
+          <i class="material-icons">swap_vert</i>
+        </div>
+        <div class = "icon-selection" id= "settings-select">
+          <i class="material-icons">settings</i>
+        </div>
      </div>
-      <div class="touchpad" id="touchpad">
-      </div> 
+
    </div>

-     <!-- The Modal -->
+     <!-- Setting Modal -->
    <div id="myModal" class="modal">
-      <!-- Modal content -->
-      <div class="modal-header">
+
+      <div id="modal-content" class="modal-content">
+
        <button type="button" class="close" data-dismiss="modal">&times;</button>
-        <h4 class="modal-title">Change Input</h4>
-      </div>
-      <div id="modal-body">
-        <p><input type="text" id="inputText" value=""></p>
-      </div>
-      <div id="modal-save">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
-      </div>
-      <div id="modal-close">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <a class="btn btn-primary" href="/public/faq"> Help Page </a>  
+         <button class="password-button" id="passcode"><i class="mdi-notification-vpn-lock"></i> PassCode</a></button>
+        <br>
+        <button class="settings-button" id="new-keyboard"> New Keyboard </button>
+        <button class="settings-button" id="delete-keyboard"> Delete Keyboard </button>
+        <button class="settings-button" id="add-key"> Add Key </button>
+        <div id="edit-wrapper">
+          <input id="edit-toggle" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
+          <label id = "edit-label">
+          Edit Toggle
+          </label>
+        </div>
      </div>
+
    </div>

+      <!-- Edit Modal -->
+      <div id="edit-modal" class="modal">
+
+        <div class="modal-header">
+          <h4 class="modal-title">Change Input</h4>
+          <h4 class="modal-alt">Alt Text (Optional)</h4>
+        </div>
+        <div id="modal-body">
+          <p class='modal-title'><input type="text" class="inputText" id="inputText" value=""></p>
+          <p class='modal-alt'><input type="text" class="inputText" id="altText" value=""></p>
+        </div>
+        <div class = "save" id="modal-save">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
+        </div>
+        <div id="modal-close">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+
+     </div>
+
+     <!-- New Board Modal -->
+      <div id="newBoard-modal" class="modal">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4 class="modal-title">Name Board</h4>
+        </div>
+        <div id="newBoard-modal-body">
+          <p><input type="text" class="inputText" id="inputBoardName" value=""></p>
+        </div>
+        <div class = "save" id="newBoard-save">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
+        </div>
+     </div>
+       
+
    <script defer src="/public/vendor/jquery/dist/jquery.min.js"></script>
    <script defer src="/public/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <script defer src="/public/vendor/bootstrap-material-design/dist/js/ripples.min.js"></script>
@@ -89,8 +139,13 @@
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.8/interact.min.js"></script>
    <script defer src="/socket.io/socket.io.js"></script>
    <script defer src="/public/vendor/hammerjs/hammer.min.js"></script>
-    <script defer src="/public/style/style.js"></script>
+    <script defer src="/public/vendor/swiper/dist/js/swiper.min.js"></script>
+    <script defer src="/public/vendor/favicon/favicon.js"></script>
+    <link href="/public/vendor/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
+    <script defer src="/public/vendor/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
    <script defer src="/public/js/client.js"></script>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
  </body>
 </html>

--- a/public/faq/css/reset.css
+++ b/public/faq/css/reset.css
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, main {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
--- a/public/faq/css/style.css
+++ b/public/faq/css/style.css
+/* -------------------------------- 
+
+Primary style
+
+-------------------------------- */
+*, *::after, *::before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+*::after, *::before {
+  content: '';
+}
+
+body {
+  font-size: 100%;
+  font-family: "Open Sans", sans-serif;
+  color: #4e5359;
+  background-color: #f3f3f5;
+}
+body::after {
+  /* overlay layer visible on small devices when the right panel slides in */
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(78, 83, 89, 0.8);
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
+  -moz-transition: opacity .3s 0s, visibility 0s .3s;
+  transition: opacity .3s 0s, visibility 0s .3s;
+}
+body.cd-overlay::after {
+  visibility: visible;
+  opacity: 1;
+  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
+  -moz-transition: opacity .3s 0s, visibility 0s 0s;
+  transition: opacity .3s 0s, visibility 0s 0s;
+}
+@media only screen and (min-width: 768px) {
+  body::after {
+    display: none;
+  }
+}
+
+a {
+  color: #a9c056;
+  text-decoration: none;
+}
+
+/* -------------------------------- 
+
+Main components 
+
+-------------------------------- */
+header {
+  position: relative;
+  height: 180px;
+  line-height: 180px;
+  text-align: center;
+  background-color: #a9c056;
+}
+header h1 {
+  color: #ffffff;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 20px;
+  font-size: 1.25rem;
+}
+@media only screen and (min-width: 1024px) {
+  header {
+    height: 240px;
+    line-height: 240px;
+  }
+  header h1 {
+    font-size: 36px;
+    font-size: 2.25rem;
+    font-weight: 300;
+  }
+}
+
+.cd-faq {
+  width: 90%;
+  max-width: 1024px;
+  margin: 2em auto;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+}
+.cd-faq:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+@media only screen and (min-width: 768px) {
+  .cd-faq {
+    position: relative;
+    margin: 4em auto;
+    box-shadow: none;
+  }
+}
+
+.cd-faq-categories a {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  height: 50px;
+  line-height: 50px;
+  padding: 0 28px 0 16px;
+  background-color: #4e5359;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #ffffff;
+  white-space: nowrap;
+  border-bottom: 1px solid #555b61;
+  text-overflow: ellipsis;
+}
+.cd-faq-categories a::before, .cd-faq-categories a::after {
+  /* plus icon on the right */
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  display: inline-block;
+  height: 1px;
+  width: 10px;
+  background-color: #7f868e;
+}
+.cd-faq-categories a::after {
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.cd-faq-categories li:last-child a {
+  border-bottom: none;
+}
+@media only screen and (min-width: 768px) {
+  .cd-faq-categories {
+    width: 20%;
+    float: left;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  }
+  .cd-faq-categories a {
+    font-size: 13px;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    padding-left: 24px;
+    padding: 0 24px;
+    -webkit-transition: background 0.2s, padding 0.2s;
+    -moz-transition: background 0.2s, padding 0.2s;
+    transition: background 0.2s, padding 0.2s;
+  }
+  .cd-faq-categories a::before, .cd-faq-categories a::after {
+    display: none;
+  }
+  .no-touch .cd-faq-categories a:hover {
+    background: #555b61;
+  }
+  .no-js .cd-faq-categories {
+    width: 100%;
+    margin-bottom: 2em;
+  }
+}
+@media only screen and (min-width: 1024px) {
+  .cd-faq-categories {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200px;
+    z-index: 2;
+  }
+  .cd-faq-categories a::before {
+    /* decorative rectangle on the left visible for the selected item */
+    display: block;
+    top: 0;
+    right: auto;
+    left: 0;
+    height: 100%;
+    width: 3px;
+    background-color: #a9c056;
+    opacity: 0;
+    -webkit-transition: opacity 0.2s;
+    -moz-transition: opacity 0.2s;
+    transition: opacity 0.2s;
+  }
+  .cd-faq-categories .selected {
+    background: #42464b !important;
+  }
+  .cd-faq-categories .selected::before {
+    opacity: 1;
+  }
+  .cd-faq-categories.is-fixed {
+    /* top and left value assigned in jQuery */
+    position: fixed;
+  }
+  .no-js .cd-faq-categories {
+    position: relative;
+  }
+}
+
+.cd-faq-items {
+  position: fixed;
+  height: 100%;
+  width: 90%;
+  top: 0;
+  right: 0;
+  background: #ffffff;
+  padding: 0 5% 1em;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  z-index: 1;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform: translateZ(0) translateX(100%);
+  -moz-transform: translateZ(0) translateX(100%);
+  -ms-transform: translateZ(0) translateX(100%);
+  -o-transform: translateZ(0) translateX(100%);
+  transform: translateZ(0) translateX(100%);
+  -webkit-transition: -webkit-transform .3s;
+  -moz-transition: -moz-transform .3s;
+  transition: transform .3s;
+}
+.cd-faq-items.slide-in {
+  -webkit-transform: translateZ(0) translateX(0%);
+  -moz-transform: translateZ(0) translateX(0%);
+  -ms-transform: translateZ(0) translateX(0%);
+  -o-transform: translateZ(0) translateX(0%);
+  transform: translateZ(0) translateX(0%);
+}
+.no-js .cd-faq-items {
+  position: static;
+  height: auto;
+  width: 100%;
+  -webkit-transform: translateX(0);
+  -moz-transform: translateX(0);
+  -ms-transform: translateX(0);
+  -o-transform: translateX(0);
+  transform: translateX(0);
+}
+@media only screen and (min-width: 768px) {
+  .cd-faq-items {
+    position: static;
+    height: auto;
+    width: 78%;
+    float: right;
+    overflow: visible;
+    -webkit-transform: translateZ(0) translateX(0);
+    -moz-transform: translateZ(0) translateX(0);
+    -ms-transform: translateZ(0) translateX(0);
+    -o-transform: translateZ(0) translateX(0);
+    transform: translateZ(0) translateX(0);
+    padding: 0;
+    background: transparent;
+  }
+}
+@media only screen and (min-width: 1024px) {
+  .cd-faq-items {
+    float: none;
+    width: 100%;
+    padding-left: 220px;
+  }
+  .no-js .cd-faq-items {
+    padding-left: 0;
+  }
+}
+
+.cd-close-panel {
+  position: fixed;
+  top: 5px;
+  right: -100%;
+  display: block;
+  height: 40px;
+  width: 40px;
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+  z-index: 2;
+  /* Force Hardware Acceleration in WebKit */
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transition: right 0.4s;
+  -moz-transition: right 0.4s;
+  transition: right 0.4s;
+}
+.cd-close-panel::before, .cd-close-panel::after {
+  /* close icon in CSS */
+  position: absolute;
+  top: 16px;
+  left: 12px;
+  display: inline-block;
+  height: 3px;
+  width: 18px;
+  background: #6c7d8e;
+}
+.cd-close-panel::before {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.cd-close-panel::after {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.cd-close-panel.move-left {
+  right: 2%;
+}
+@media only screen and (min-width: 768px) {
+  .cd-close-panel {
+    display: none;
+  }
+}
+
+.cd-faq-group {
+  /* hide group not selected */
+  display: none;
+}
+.cd-faq-group.selected {
+  display: block;
+}
+.cd-faq-group .cd-faq-title {
+  background: transparent;
+  box-shadow: none;
+  margin: 1em 0;
+}
+.no-touch .cd-faq-group .cd-faq-title:hover {
+  box-shadow: none;
+}
+.cd-faq-group .cd-faq-title h2 {
+  text-transform: uppercase;
+  font-size: 12px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #bbbbc7;
+}
+.no-js .cd-faq-group {
+  display: block;
+}
+@media only screen and (min-width: 768px) {
+  .cd-faq-group {
+    /* all groups visible */
+    display: block;
+  }
+  .cd-faq-group > li {
+    background: #ffffff;
+    margin-bottom: 6px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    -webkit-transition: box-shadow 0.2s;
+    -moz-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+  }
+  .no-touch .cd-faq-group > li:hover {
+    box-shadow: 0 1px 10px rgba(108, 125, 142, 0.3);
+  }
+  .cd-faq-group .cd-faq-title {
+    margin: 2em 0 1em;
+  }
+  .cd-faq-group:first-child .cd-faq-title {
+    margin-top: 0;
+  }
+}
+
+.cd-faq-trigger {
+  position: relative;
+  display: block;
+  margin: 1.6em 0 .4em;
+  line-height: 1.2;
+}
+@media only screen and (min-width: 768px) {
+  .cd-faq-trigger {
+    font-size: 24px;
+    font-size: 1.5rem;
+    font-weight: 300;
+    margin: 0;
+    padding: 24px 72px 24px 24px;
+  }
+  .cd-faq-trigger::before, .cd-faq-trigger::after {
+    /* arrow icon on the right */
+    position: absolute;
+    right: 24px;
+    top: 50%;
+    height: 2px;
+    width: 13px;
+    background: #cfdca0;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transition-property: -webkit-transform;
+    -moz-transition-property: -moz-transform;
+    transition-property: transform;
+    -webkit-transition-duration: 0.2s;
+    -moz-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+  }
+  .cd-faq-trigger::before {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+    right: 32px;
+  }
+  .cd-faq-trigger::after {
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+  }
+  .content-visible .cd-faq-trigger::before {
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+  }
+  .content-visible .cd-faq-trigger::after {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+}
+
+.picture{
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    height: 110%;
+}
+
+.cd-faq-content p {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: #6c7d8e;
+}
+@media only screen and (min-width: 768px) {
+  .cd-faq-content {
+    display: none;
+    padding: 0 24px 30px;
+  }
+  .cd-faq-content p {
+    line-height: 1.6;
+  }
+  .no-js .cd-faq-content {
+    display: block;
+  }
+}
--- a/public/faq/images/default_screen.png
+++ b/public/faq/images/default_screen.png
--- a/public/faq/images/desktop_password.png
+++ b/public/faq/images/desktop_password.png
--- a/public/faq/images/edit_keys.png
+++ b/public/faq/images/edit_keys.png
--- a/public/faq/images/hotkeys.png
+++ b/public/faq/images/hotkeys.png
--- a/public/faq/images/main_screen.png
+++ b/public/faq/images/main_screen.png
--- a/public/faq/images/navigation.png
+++ b/public/faq/images/navigation.png
No results found