295 lines
13 KiB
HTML
295 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
|
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="node_modules/select2/dist/css/select2.min.css" rel="stylesheet">
|
|
<link href="css/style.css" rel="stylesheet">
|
|
<meta charset="utf-8">
|
|
<title>Ultimate Hacking Keyboard - Agent mockups</title>
|
|
</head>
|
|
<body style="background-color: transparent; width: 581px; text-align: center; padding: 0 20px 20px;">
|
|
|
|
<!--
|
|
Basic structure of the popover to be used with the Handlebars templates.
|
|
-->
|
|
<div class="popover bottom" style="display: inline-block; min-width: 577px; position: relative;">
|
|
<div class="arrow"></div>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div id="key-editor-top__target"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div id="key-editor-content__target"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div id="key-editor-bottom__target"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
|
<script src="node_modules/handlebars/dist/handlebars.js"></script>
|
|
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
<script src="node_modules/select2/dist/js/select2.min.js"></script>
|
|
<script src="script.js"></script>
|
|
|
|
<!--
|
|
Handlebars templates for the common parts of the popover.
|
|
-->
|
|
|
|
<!-- Popover titlebar (where the tabs resides). -->
|
|
<script id="key-editor-top__source" type="text/x-handlebars-template">
|
|
<div class="popover-title menu-button-group">
|
|
Action:
|
|
<div class="btn-group popover-menu" role="group" aria-label="...">
|
|
{{#each buttons}}
|
|
<button class="btn btn-sm btn-{{type}}" data-content="{{content}}" type="button"><i class="fa {{icon}}"></i> {{title}}</button>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
<div class="popover-title menu-tabs">
|
|
<ul class="nav nav-tabs popover-menu">
|
|
{{#each buttons}}
|
|
<li role="presentation">
|
|
<a href="#" class="menu-tabs--item" data-content="{{content}}">
|
|
<i class="fa {{icon}}"></i> {{title}}
|
|
</a>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- Popover footer. -->
|
|
<script id="key-editor-bottom__source" type="text/x-handlebars-template">
|
|
<div class="popover-actions">
|
|
<button class="btn btn-sm btn-default" type="button">Cancel</button>
|
|
<button class="btn btn-sm btn-primary" type="button">Remap key</button>
|
|
</div>
|
|
</script>
|
|
|
|
<!--
|
|
Handlebars templates for the contents of the popover tabs.
|
|
-->
|
|
|
|
<!-- Keypress action. -->
|
|
<script id="key-editor-content__source--keypress" type="text/x-handlebars-template">
|
|
<div class="popover-content" style="margin-bottom:2px">
|
|
<div class="global-key-setup--wrapper">
|
|
<div class="global-key-setup">
|
|
<!-- Primary action setup: scancode+modifiers. -->
|
|
<div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
|
|
<b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
|
|
<select class="scancode" style="width: 200px">
|
|
{{#each scancode}}
|
|
<optgroup label="{{groupName}}">
|
|
{{#each groupValues}}
|
|
<option value="{{scancode}}" data-searchterm="{{searchTerm}}">{{label}}</option>
|
|
{{/each}}
|
|
</optgroup>
|
|
{{/each}}
|
|
</select>
|
|
<!-- bof optional -->
|
|
<!-- Icon for switching the keyboard layout preview when capturing. -->
|
|
<!-- <i class="fa fa-eye pull-right" style="margin: 0 0 0 2rem; position: relative; top: 0.65rem;" data-toggle="tooltip" data-placement="bottom" title="Show preview keyboard."></i> -->
|
|
<!-- eof optional -->
|
|
<button style="display: inline-block; margin: 0 0 0 .25rem;" type="button" class="btn btn-sm btn-default btn--capture-keystroke btn--capture-keystroke__start">
|
|
<i class="fa fa-circle" style="color:#c00"></i> Capture keystroke
|
|
</button>
|
|
<button style="display: none; margin: 0 0 0 .25rem;" type="button" class="btn btn-sm btn-info btn--capture-keystroke btn--capture-keystroke__stop">
|
|
<i class="fa fa-square"></i> Stop capturing
|
|
</button>
|
|
</div>
|
|
<div class="scancode-options">
|
|
<b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
|
|
<div class="btn-toolbar modifiers" style="display:inline-block">
|
|
<div class="btn-group btn-group-sm modifiers__left">
|
|
{{#each modifiers.left}}
|
|
<button type="button" class="btn btn-default {{primary}}">{{name}}</button>
|
|
{{/each}}
|
|
</div>
|
|
<div class="btn-group btn-group-sm modifiers__right">
|
|
{{#each modifiers.right}}
|
|
<button type="button" class="btn btn-default {{primary}}">{{name}}</button>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- bof optional -->
|
|
<!-- Keyboard layout preview to be shown in capturing mode. -->
|
|
<!--
|
|
<div class="preview-wrapper">
|
|
<img src="images/base-layer.svg" />
|
|
</div>
|
|
-->
|
|
<!-- eof optional -->
|
|
|
|
<!-- Secondary action setup: long press action. -->
|
|
<div style="margin-top: 3rem;">
|
|
<b class="setting-label" style="position:relative;">Long press action:</b>
|
|
<select class="secondary-role" style="width:135px">
|
|
{{#each secondaryRole}}
|
|
{{#if groupName}}
|
|
<optgroup label="{{groupName}}">
|
|
{{/if}}
|
|
{{#each groupValues}}
|
|
<option value="{{value}}">{{label}}</option>
|
|
{{/each}}
|
|
{{#if groupName}}
|
|
</optgroup>
|
|
{{/if}}
|
|
{{/each}}
|
|
</select>
|
|
<i class="fa fa-question-circle" style="margin-left:5px" data-toggle="tooltip" data-placement="right" title="This action happens when the key is being held along with another key."></i>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Informational text to display when a layer action is selected. -->
|
|
<div class="disabled-state--text" style="display: none; color: #31708f; padding-right: 40px;">
|
|
<i class="fa fa-info-circle" style="font-size: 2.6rem; float: left; padding: 1rem 1.5rem 2rem;"></i>
|
|
When a key is configured as layer switcher key, you can't assign other functions to it.
|
|
To assign a scancode to the key, set the <em>Layer action</em> to <em>None</em>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- Layer modifier/togge action. -->
|
|
<script id="key-editor-content__source--layer" type="text/x-Handlebars-template">
|
|
<div class="popover-content" style="margin-bottom:2px">
|
|
<div style="margin-bottom:0px; margin-top:2px">
|
|
<select class="layer-toggle" style="width: 100px">
|
|
<option value="activate">Activate</option>
|
|
<option value="toggle">Toggle</option>
|
|
</select>
|
|
<span> the </span>
|
|
<select class="layer-switcher" style="width: 100px">
|
|
<option value="mod">Mod</option>
|
|
<option value="fn">Fn</option>
|
|
<option value="mouse">Mouse</option>
|
|
</select>
|
|
<span>layer by <span class="layer-help">holding</span><span class="layer-help" style="display: none;">pressing</span> this key.</span>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- Mouse action. -->
|
|
<script id="key-editor-content__source--mouse" type="text/x-handlebars-template">
|
|
<div class="popover-content mouse row" style="margin-bottom:2px">
|
|
<div class="col-xs-4 mouse__action--type">
|
|
<ul class="nav nav-pills nav-stacked">
|
|
<li role="presentation" class="active"><a href="#" data-config="move">Move</a></li>
|
|
<li role="presentation"><a href="#" data-config="scroll">Scroll</a></li>
|
|
<li role="presentation"><a href="#" data-config="click">Click</a></li>
|
|
<li role="presentation"><a href="#" data-config="speed">Speed</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-xs-8 mouse__action--config">
|
|
<div class="mouse__config mouse__config--move text-center">
|
|
<div class="row">
|
|
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-arrow-up"></i></button>
|
|
</div>
|
|
<div class="row">
|
|
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-arrow-left"></i></button>
|
|
<button type="button" class="btn btn-default btn-lg btn-placeholder"><i class="fa fa-square"></i></button>
|
|
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-arrow-right"></i></button>
|
|
</div>
|
|
<div class="row">
|
|
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-arrow-down"></i></button>
|
|
</div>
|
|
</div>
|
|
<div style="display: none;" class="mouse__config mouse__config--scroll text-center">
|
|
<div class="row">
|
|
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-angle-double-up"></i></button>
|
|
</div>
|
|
<div class="row">
|
|
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-angle-double-left"></i></button>
|
|
<button type="button" class="btn btn-default btn-lg btn-placeholder"><i class="fa fa-square"></i></button>
|
|
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-angle-double-right"></i></button>
|
|
</div>
|
|
<div class="row">
|
|
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-angle-double-down"></i></button>
|
|
</div>
|
|
</div>
|
|
<div style="display: none;" class="mouse__config mouse__config--click">
|
|
<div class="btn-group col-xs-12" role="group">
|
|
<button type="button" class="btn btn-default col-xs-4">Left</button>
|
|
<button type="button" class="btn btn-default col-xs-4">Middle</button>
|
|
<button type="button" class="btn btn-default col-xs-4">Right</button>
|
|
</div>
|
|
</div>
|
|
<div style="display: none;" class="mouse__config mouse__config--speed text-center">
|
|
<div class="help-text--mouse-speed text-left">
|
|
<p>Press this key along with mouse movement/scrolling to accelerate/decelerate the speed of the action.</p>
|
|
<p>You can set the multiplier in <a href="#" title="link to the setting">link to setting</a>.</p>
|
|
</div>
|
|
<div class="btn-group btn-group-lg" role="group">
|
|
<button type="button" class="btn btn-default">-</button>
|
|
<button type="button" class="btn btn-default">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- Macro action. -->
|
|
<script id="key-editor-content__source--macro" type="text/x-handlebars-template">
|
|
<div class="popover-content" style="margin-bottom:2px">
|
|
<div style="margin-bottom:0px; margin-top:2px">
|
|
<b style="">Play macro:</b>
|
|
<select class="macro-selector" style="width:402px">
|
|
{{#each macros}}
|
|
<option value="{{value}}" data-abbrev="{{abbrev}}" data-abbrev-image="{{dataAbbrevImage}}" data-image="{{dataImage}}">{{name}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
<div class="macro-preview" style="opacity: .35;">
|
|
<div class="list-group" style="margin-top: 20px;">
|
|
<div class="list-group-item action--item">
|
|
<i class="fa fa-square"></i> Press a key
|
|
</div>
|
|
<div class="list-group-item action--item">
|
|
<i class="fa fa-clock-o"></i> Wait some time
|
|
</div>
|
|
<div class="list-group-item action--item">
|
|
<i class="fa fa-mouse-pointer"></i> Move mouse
|
|
</div>
|
|
<div class="list-group-item action--item">
|
|
<i class="fa fa-square"></i> Press and hold a key
|
|
</div>
|
|
<div class="list-group-item action--item">
|
|
<i class="fa fa-mouse-pointer"></i> Click with mouse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- Switch keymap action. -->
|
|
<script id="key-editor-content__source--switchKeymap" type="text/x-handlebars-template">
|
|
<div class="popover-content" style="margin-bottom:2px">
|
|
<div style="margin-bottom:0px; margin-top:2px">
|
|
<b style="">Switch to keymap:</b>
|
|
<select class="layout-switcher" style="width:390px">
|
|
{{#each layouts}}
|
|
<option value="{{value}}" data-abbrev="{{abbrev}}" data-abbrev-image="{{dataAbbrevImage}}" data-image="{{dataImage}}">{{name}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</div>
|
|
<div class="layout-preview">
|
|
<img src="images/base-layer--blank.svg" />
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<!-- None action. -->
|
|
<script id="key-editor-content__source--none" type="text/x-handlebars-template">
|
|
<div class="key-editor--none__description col-sm-12">
|
|
<p class="col-sm-12">This key is unassigned and has no functionality.</p>
|
|
</div>
|
|
</script>
|
|
</body>
|
|
</html>
|