Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • CustomHotkey
  • alpha
  • altText
  • delete
  • master
5 results

Target

Select target project
  • EzTunes/EECS498-uBoard
1 result
Select Git revision
  • CustomHotkey
  • alpha
  • altText
  • delete
  • master
5 results
Show changes
Commits on Source (51)
Showing
with 838 additions and 132 deletions
public/vendor/
node_modules/
custom_configs/*
dist/
File deleted
......@@ -2,6 +2,8 @@
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.
......
......@@ -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"
}
}
......@@ -35,7 +35,7 @@
"0"
],
"button8": [
"W",
"i",
"70",
"0"
],
......@@ -51,97 +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"
],
"button27": [
"#",
"70",
"60"
],
"button28": [
"@",
"80",
"60"
],
"button29": [
"*",
"90",
"69",
"60"
]
}
\ No newline at end of file
......@@ -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
{
"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
......@@ -355,7 +355,7 @@
"content-type": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
"integrity": "sha1-4TjMdeBAxyexlm/l5fjJruJW/js="
},
"cookie": {
"version": "0.3.1",
......@@ -404,7 +404,7 @@
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
"requires": {
"ms": "2.0.0"
}
......@@ -506,7 +506,7 @@
"engine.io": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/engine.io/-/engine.io-1.8.5.tgz",
"integrity": "sha512-j1DWIcktw4hRwrv6nWx++5nFH2X64x16MAG2P0Lmi5Dvdfi3I+Jhc7JKJIdAmDJa+5aZ/imHV7dWRPy2Cqjh3A==",
"integrity": "sha1-Tr5edcbcEj3uSv3Obl/c7SHrk/Y=",
"requires": {
"accepts": "1.3.3",
"base64id": "1.0.0",
......@@ -543,7 +543,7 @@
"engine.io-client": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-1.8.5.tgz",
"integrity": "sha512-AYTgHyeVUPitsseqjoedjhYJapNVoSPShbZ+tEUX9/73jgZ/Z3sUlJf9oYgdEBBdVhupUpUqSxH0kBCXlQnmZg==",
"integrity": "sha1-/n+2DLDc8vooWUiTKctZaN7esR8=",
"requires": {
"component-emitter": "1.2.1",
"component-inherit": "0.0.3",
......@@ -932,7 +932,7 @@
"iconv-lite": {
"version": "0.4.19",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
"integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
"integrity": "sha1-90aPYBNfXl2tM5nAqBvpoWA6CCs="
},
"indexof": {
"version": "0.0.1",
......@@ -957,7 +957,7 @@
"ini": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
"integrity": "sha1-7uJfVtscnsYIXgwid4CD9Zar+Sc="
},
"invert-kv": {
"version": "1.0.0",
......@@ -1005,6 +1005,11 @@
"integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
"dev": true
},
"is-wsl": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
"integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
},
"isarray": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
......@@ -1107,7 +1112,7 @@
"mime": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
"integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
"integrity": "sha1-Eh+evEnjdm8xGnbh+hyAA8SwOqY="
},
"mime-db": {
"version": "1.30.0",
......@@ -1267,10 +1272,13 @@
"wrappy": "1.0.2"
}
},
"openurl": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/openurl/-/openurl-1.1.1.tgz",
"integrity": "sha1-OHW0sO96UsFW8NtB1GCduw+Us4c="
"opn": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/opn/-/opn-5.2.0.tgz",
"integrity": "sha512-Jd/GpzPyHF4P2/aNOVmS3lfMSWV9J7cOhCG1s08XCEAsPkB7lp6ddiU0J7XzyQRDUh8BqJ7PchfINjR8jyofRQ==",
"requires": {
"is-wsl": "1.1.0"
}
},
"options": {
"version": "0.0.6",
......@@ -1464,7 +1472,7 @@
"qs": {
"version": "6.5.1",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz",
"integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A=="
"integrity": "sha1-NJzfbu+J7EXBLX1es/wMhwNDptg="
},
"range-parser": {
"version": "1.2.0",
......@@ -1597,7 +1605,7 @@
"safe-buffer": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
"integrity": "sha1-iTMSr2myEj3vcfV4iQAWce6yyFM="
},
"semver": {
"version": "5.5.0",
......@@ -1607,7 +1615,7 @@
"send": {
"version": "0.16.1",
"resolved": "https://registry.npmjs.org/send/-/send-0.16.1.tgz",
"integrity": "sha512-ElCLJdJIKPk6ux/Hocwhk7NFHpI3pVm/IZOYWqUmoxcgeyM+MpxHHKhb8QmlJDX1pU6WrgaHBkVNm73Sv7uc2A==",
"integrity": "sha1-pw4coh0TgsEdDZ9iMd6ygQgNerM=",
"requires": {
"debug": "2.6.9",
"depd": "1.1.2",
......@@ -1627,7 +1635,7 @@
"serve-static": {
"version": "1.13.1",
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.1.tgz",
"integrity": "sha512-hSMUZrsPa/I09VYFJwa627JJkNs0NrfL1Uzuup+GqHfToR2KcsXFymXSV90hoyw3M+msjFuQly+YzIH/q0MGlQ==",
"integrity": "sha1-TFfVNASnYdjy58HooYpH2/J4pxk=",
"requires": {
"encodeurl": "1.0.2",
"escape-html": "1.0.3",
......@@ -1643,7 +1651,7 @@
"setprototypeof": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
"integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
"integrity": "sha1-0L2FU2iHtv58DYGMuWLZ2RxU5lY="
},
"signal-exit": {
"version": "3.0.2",
......@@ -2085,7 +2093,7 @@
"ws": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/ws/-/ws-1.1.5.tgz",
"integrity": "sha512-o3KqipXNUdS7wpQzBHSe180lBGO60SoK0yVo3CYJgb2MkobuWuBX6dhkYP5ORCLd55y+SaflMOV5fqAB53ux4w==",
"integrity": "sha1-y9nm514J/F0skAFfIfDECHXg3VE=",
"requires": {
"options": "0.0.6",
"ultron": "1.0.2"
......
......@@ -17,7 +17,7 @@
"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"
},
......
File added
......@@ -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="touchpad" id="touchpad">
</div>
<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>
<!-- 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>
/* 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
/* --------------------------------
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;
}
}
public/faq/images/default_screen.png

132 KiB

public/faq/images/desktop_password.png

85.2 KiB

public/faq/images/edit_keys.png

187 KiB

public/faq/images/hotkeys.png

134 KiB

public/faq/images/main_screen.png

211 KiB