Printing data on numpad key press, first version. Settings page for mapping key to actions.

public/css/app.css

@@ -28,6 +28,21 @@ form {
     display: none;
 }
 
+.flex {
+    display: flex;
+    align-items: center;
+}
+.flex.space-between {
+    justify-content: space-between;
+}
+.flex.header {
+    margin-bottom: 1rem;
+}
+
+.flex .header {
+    margin-bottom: 0;
+}
+
 .icon {
     cursor: pointer;
     height: 25px;
@@ -55,342 +70,455 @@ form {
     height: 29px;
     margin: 0;
 }
+
 .icon.address-card-o {
     background-position-x: -0px;
 }
+
 .icon.anchor {
     background-position-x: -25px;
 }
+
 .icon.archive-3 {
     background-position-x: -50px;
 }
+
 .icon.at {
     background-position-x: -75px;
 }
+
 .icon.balance-scale {
     background-position-x: -100px;
 }
+
 .icon.ban {
     background-position-x: -125px;
 }
+
 .icon.bar-chart-o {
     background-position-x: -150px;
 }
+
 .icon.barcode {
     background-position-x: -175px;
 }
+
 .icon.battery-empty {
     background-position-x: -200px;
 }
+
 .icon.battery-full {
     background-position-x: -225px;
 }
+
 .icon.battery-half {
     background-position-x: -250px;
 }
+
 .icon.battery-quarter {
     background-position-x: -275px;
 }
+
 .icon.battery-three-quarters {
     background-position-x: -300px;
 }
+
 .icon.bed {
     background-position-x: -325px;
 }
+
 .icon.beer {
     background-position-x: -350px;
 }
+
 .icon.bell-o {
     background-position-x: -375px;
 }
+
 .icon.bell-slash-o {
     background-position-x: -400px;
 }
+
 .icon.bicycle {
     background-position-x: -425px;
 }
+
 .icon.birthday-cake {
     background-position-x: -450px;
 }
+
 .icon.bolt {
     background-position-x: -475px;
 }
+
 .icon.bomb {
     background-position-x: -500px;
 }
+
 .icon.book {
     background-position-x: -525px;
 }
+
 .icon.bug {
     background-position-x: -550px;
 }
+
 .icon.building-o {
     background-position-x: -575px;
 }
+
 .icon.bullhorn {
     background-position-x: -600px;
 }
+
 .icon.bus {
     background-position-x: -625px;
 }
+
 .icon.camera {
     background-position-x: -650px;
 }
+
 .icon.car {
     background-position-x: -675px;
 }
+
 .icon.chain {
     background-position-x: -700px;
 }
+
 .icon.chat-2 {
     background-position-x: -725px;
 }
+
 .icon.check {
     background-position-x: -750px;
 }
+
 .icon.cloud {
     background-position-x: -775px;
 }
+
 .icon.code {
     background-position-x: -800px;
 }
+
 .icon.coffee {
     background-position-x: -825px;
 }
+
 .icon.cog {
     background-position-x: -850px;
 }
+
 .icon.cutlery {
     background-position-x: -875px;
 }
+
 .icon.dashboard {
     background-position-x: -900px;
 }
+
 .icon.database {
     background-position-x: -925px;
 }
+
 .icon.diamond {
     background-position-x: -950px;
 }
+
 .icon.dollar {
     background-position-x: -975px;
 }
+
 .icon.dribbble {
     background-position-x: -1000px;
 }
+
 .icon.envelope-o {
     background-position-x: -1025px;
 }
+
 .icon.envira {
     background-position-x: -1050px;
 }
+
 .icon.exclamation-triangle {
     background-position-x: -1075px;
 }
+
 .icon.female {
     background-position-x: -1100px;
 }
+
 .icon.file-text-o {
     background-position-x: -1125px;
 }
+
 .icon.film {
     background-position-x: -1150px;
 }
+
 .icon.fingerprint {
     background-position-x: -1175px;
 }
+
 .icon.fire-extinguisher {
     background-position-x: -1200px;
 }
+
 .icon.fire {
     background-position-x: -1225px;
 }
+
 .icon.flag-o {
     background-position-x: -1250px;
 }
+
 .icon.flask {
     background-position-x: -1275px;
 }
+
 .icon.floppy-o {
     background-position-x: -1300px;
 }
+
 .icon.folder-o {
     background-position-x: -1325px;
 }
+
 .icon.folder-open-o {
     background-position-x: -1350px;
 }
+
 .icon.frown-o {
     background-position-x: -1375px;
 }
+
 .icon.gamepad {
     background-position-x: -1400px;
 }
+
 .icon.gift {
     background-position-x: -1425px;
 }
+
 .icon.git {
     background-position-x: -1450px;
 }
+
 .icon.glass {
     background-position-x: -1475px;
 }
+
 .icon.graduation-cap {
     background-position-x: -1500px;
 }
+
 .icon.grav {
     background-position-x: -1525px;
 }
+
 .icon.group {
     background-position-x: -1550px;
 }
+
 .icon.hand-o-left {
     background-position-x: -1575px;
 }
+
 .icon.heart-o {
     background-position-x: -1600px;
 }
+
 .icon.home {
     background-position-x: -1625px;
 }
+
 .icon.lemon-o {
     background-position-x: -1650px;
 }
+
 .icon.lightbulb-o {
     background-position-x: -1675px;
 }
+
 .icon.list-alt {
     background-position-x: -1700px;
 }
+
 .icon.location-arrow {
     background-position-x: -1725px;
 }
+
 .icon.lock {
     background-position-x: -1750px;
 }
+
 .icon.male {
     background-position-x: -1775px;
 }
+
 .icon.map-1 {
     background-position-x: -1800px;
 }
+
 .icon.map-marker {
     background-position-x: -1825px;
 }
+
 .icon.microchip {
     background-position-x: -1850px;
 }
+
 .icon.money {
     background-position-x: -1875px;
 }
+
 .icon.moon-o {
     background-position-x: -1900px;
 }
+
 .icon.music {
     background-position-x: -1925px;
 }
+
 .icon.paper-plane {
     background-position-x: -1950px;
 }
+
 .icon.paperclip {
     background-position-x: -1975px;
 }
+
 .icon.paw {
     background-position-x: -2000px;
 }
+
 .icon.pencil {
     background-position-x: -2025px;
 }
+
 .icon.phone {
     background-position-x: -2050px;
 }
+
 .icon.pie-chart {
     background-position-x: -2075px;
 }
+
 .icon.piggy-bank {
     background-position-x: -2100px;
 }
+
 .icon.plane {
     background-position-x: -2125px;
 }
+
 .icon.question-circle-o {
     background-position-x: -2150px;
 }
+
 .icon.rocket {
     background-position-x: -2175px;
 }
+
 .icon.search {
     background-position-x: -2200px;
 }
+
 .icon.ship {
     background-position-x: -2225px;
 }
+
 .icon.shopping-cart {
     background-position-x: -2250px;
 }
+
 .icon.smile-o {
     background-position-x: -2275px;
 }
+
 .icon.snowflake-o {
     background-position-x: -2300px;
 }
+
 .icon.steam {
     background-position-x: -2325px;
 }
+
 .icon.subway {
     background-position-x: -2350px;
 }
+
 .icon.success {
     background-position-x: -2375px;
 }
+
 .icon.support {
     background-position-x: -2400px;
 }
+
 .icon.thermometer-2 {
     background-position-x: -2425px;
 }
+
 .icon.thumbs-o-down {
     background-position-x: -2450px;
 }
+
 .icon.thumbs-o-up {
     background-position-x: -2475px;
 }
+
 .icon.ticket {
     background-position-x: -2500px;
 }
+
 .icon.times {
     background-position-x: -2525px;
 }
+
 .icon.trash-o {
     background-position-x: -2550px;
 }
+
 .icon.tree {
     background-position-x: -2575px;
 }
+
 .icon.trophy {
     background-position-x: -2600px;
 }
+
 .icon.truck {
     background-position-x: -2625px;
 }
+
 .icon.umbrella {
     background-position-x: -2650px;
 }
+
 .icon.usd {
     background-position-x: -2675px;
 }
+
 .icon.warning {
     background-position-x: -2700px;
 }
+
 .icon.wifi {
     background-position-x: -2725px;
 }
+
 .icon.wpexplorer {
     background-position-x: -2750px;
 }
+
 .icon.wrench {
     background-position-x: -2775px;
 }
+
 .icon.youtube-play {
     background-position-x: -2800px;
 }