80 lines
4.2 KiB
HTML
80 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ultimate Hacking Keyboard Configurator</title>
|
|
<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="css/app.css" rel="stylesheet">
|
|
<link href="css/macro.css" rel="stylesheet">
|
|
<link href="css/style.css" rel="stylesheet">
|
|
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
|
<script>
|
|
// This js function is here to make sure it loads before any iframe content on the page.
|
|
function resizeIframe(ifr) {
|
|
ifr.style.height = (ifr.contentWindow.document.body.scrollHeight + 300) + 'px';
|
|
ifr.style.width = ifr.contentWindow.document.body.scrollWidth + 'px';
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- Google Tag Manager -->
|
|
<noscript>
|
|
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB"
|
|
height="0" width="0" style="display:none;visibility:hidden"></iframe>
|
|
</noscript>
|
|
<script>
|
|
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
})(window,document,'script','dataLayer','GTM-PQLCXB');
|
|
</script>
|
|
|
|
<div class="keymap--edit keymap--qwerty main-content__inner">
|
|
<div class="row">
|
|
<h1 class="col-xs-12 pane-title">
|
|
<i class="fa fa-keyboard-o"></i>
|
|
<span class="keymap__name pane-title__name" contenteditable="true">QWERTY</span> keymap (<span class="keymap__abbrev pane-title__abbrev" contenteditable="true">QTY</span>)
|
|
<i class="fa fa-star-o fa-star keymap__is-default"></i>
|
|
<i class="glyphicon glyphicon-trash keymap__remove pull-right" title="Remove keymap" data-toggle="tooltip" data-placement="left"></i>
|
|
</h1>
|
|
</div>
|
|
<div class="row">
|
|
</div>
|
|
<div class="row uhk--wrapper">
|
|
<div class="col-xs-12 text-center" style="margin-bottom: 2rem;">
|
|
<span class="uhk__layer-switcher--wrapper" role="" data-title="Layers: ">
|
|
<button type="button" data-layer="base" class="uhk__layer-switcher btn btn-primary btn-lg current">Base</button>
|
|
<button type="button" data-layer="mod" class="uhk__layer-switcher btn btn-default btn-lg">Mod</button>
|
|
<button type="button" data-layer="fn" class="uhk__layer-switcher btn btn-default btn-lg">Fn</button>
|
|
<button type="button" data-layer="mouse" class="uhk__layer-switcher btn btn-default btn-lg">Mouse</button>
|
|
</span>
|
|
</div>
|
|
<div class="col-xs-12">
|
|
<div class="keyboard-slider">
|
|
<div class="item uhk__layer-wrapper uhk__layer-wrapper--base current">
|
|
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
|
</div>
|
|
<div class="item uhk__layer-wrapper uhk__layer-wrapper--mod">
|
|
<img src="./images/base-layer--blank.svg" class="uhk uhk--mod-layer" alt="">
|
|
</div>
|
|
<div class="item uhk__layer-wrapper uhk__layer-wrapper--fn">
|
|
<img src="./images/base-layer--dvorak.svg" class="uhk uhk--fn-layer" alt="">
|
|
</div>
|
|
<div class="item uhk__layer-wrapper uhk__layer-wrapper--mouse">
|
|
<img src="./images/base-layer.svg" class="uhk uhk--mouse-layer" alt="">
|
|
</div>
|
|
</div>
|
|
<iframe src="popup__iframe.html" class="key-editor__popup" frameborder="0" scrolling="no" onload="resizeIframe(this)" style="display: none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
<script src="node_modules/sortablejs/Sortable.js"></script>
|
|
<script src="node_modules/select2/dist/js/select2.min.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|