diff --git a/app.css b/app.css new file mode 100644 index 00000000..7049d542 --- /dev/null +++ b/app.css @@ -0,0 +1,104 @@ +/* * * * * * * * * * * + * Split js theming. * + * * * * * * * * * * */ + +html, body { + height: 100%; +} +body { + /* padding: 8px; */ + margin: 0; + /*background-color: #F6F6F6;*/ + box-sizing: border-box; +} +.split { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + overflow-y: auto; + overflow-x: hidden; +} +.content { + border: 1px solid #C0C0C0; + box-shadow: inset 0 1px 2px #e4e4e4; + background-color: #fff; +} +.gutter { + background-color: #eee; + background-repeat: no-repeat; + background-position: 50%; +} +.gutter.gutter-horizontal { + cursor: col-resize; + background-image: url('./images/grips/vertical.png'); +} +.gutter.gutter-vertical { + cursor: row-resize; + background-image: url('./images/grips/horizontal.png'); +} +.split.split-horizontal, .gutter.gutter-horizontal { + height: 100%; + float: left; +} + +#sidebar-menu ul { + padding-left: 15px; +} + +#sidebar-menu ul li { + list-style: none; + padding: 0; +} + +.pane-title { + margin-bottom: 1em; +} + +.keymap__name.active, +.keymap__abbrev.active { + box-shadow: 0 0 0px 1px #ccc, 0 0 5px 0px #ccc; + padding: 0 .5rem; + margin: 0 -.5rem; +} + +.keymap__name, +.keymap__abbrev { + border-bottom: 2px dotted #999; +} + +.keymap__abbrev, +.keymap__abbrev.active { + padding: 0 .5rem; + margin: 0 .25rem; +} + +.keymap__is-default.fa-star { + color: #ffd700; +} + +.keymap__is-default.fa-star-o { + color: #000; +} + +.keymap__is-default:hover { + color: #ffd700; + cursor: pointer; +} + +.unk--wrapper { + /*margin-top: 10rem;*/ +} + +.uhk { + max-width: 100%; +} + +.owl-carousel .item img { + display: block; + width: 100%; + height: auto; +} + +.btn:not(.btn-primary) { + border: none; +} diff --git a/app.html b/app.html new file mode 100644 index 00000000..98fdb27a --- /dev/null +++ b/app.html @@ -0,0 +1,78 @@ + + + + + Ultimate Hacking Keyboard Configurator + + + + + + + + + +
+
+
+

+ + QWERTY keymap (QTY) + +

+
+
+
+
+
+
+ + + + +
+
+
+ +
+
+ +
+
+ + + + + + + + + + diff --git a/app.js b/app.js new file mode 100644 index 00000000..9fc1a83f --- /dev/null +++ b/app.js @@ -0,0 +1,121 @@ +$(function() { + Split(["#sidebar-menu", "#main-content"], { + gutterSize: 8, + sizes: [5, 95], + minSize: 250 + }); + + // Handlebars template for Sidebar menu. + var sidebarMenuSource = $('#sidebar-menu--source').html(); + var sidebarMenuTemplate = Handlebars.compile(sidebarMenuSource); + $('#sidebar-menu').html(sidebarMenuTemplate(menuObject)); + + // ======================== + // Keymap related settings. + // ======================== + $('.keymap__name, .keymap__abbrev').on('mouseover', function() { + $(this).addClass('active'); + }).on('mouseout', function() { + $(this).removeClass('active'); + }); + + $('.keymap__is-default').on('click', function() { + $(this).toggleClass('fa-star-o'); + }); + + $("#owl-example").owlCarousel({ + items: 1 + }); + +}); + +var menuObject = { + menu: [ + { + icon: 'keyboard-o', + name: 'Keyboard', + children: [ + { + icon: 'plus-circle', + name: 'Add new keymap' + }, + { + icon: '', + name: 'Factory keymap' + }, + { + icon: '', + name: 'QWERTY' + }, + { + icon: '', + name: 'Dvorak' + }, + { + icon: '', + name: 'Colemak' + }, + { + icon: '', + name: 'VIM' + }, + { + icon: '', + name: 'Mortal Kombat X' + }, + ] + }, + { + icon: 'play', + name: 'Macros', + children: [ + { + icon: 'plus-circle', + name: 'Add new macro' + }, + { + icon: '', + name: 'Macro1' + }, + { + icon: '', + name: 'Macro2' + }, + { + icon: '', + name: 'Macro3' + }, + { + icon: '', + name: 'Macro4' + }, + ] + }, + { + 'icon': 'puzzle-piece', + 'name': 'Add-on modules', + 'children': [ + { + 'icon': '', + 'name': 'Key cluster' + }, + { + 'icon': '', + 'name': 'Trackball' + }, + { + 'icon': '', + 'name': 'Toucpad' + }, + { + 'icon': '', + 'name': 'Trackpoing' + } + ] + }, + { + 'icon': 'gear', + 'name': 'Settings' + } + ] +};