39424a2b64
Probably we will be able to use this "trick" in the final version as well. Regarding the browser support it's quite good.
131 lines
5.8 KiB
HTML
131 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ultimate Hacking Keyboard Configurator</title>
|
|
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="bower_components/select2/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="bower_components/owl.carousel/dist/assets/owl.carousel.css" rel="stylesheet" type="text/css" />
|
|
<link href="bower_components/owl.carousel/dist/assets/owl.theme.default.css" rel="stylesheet" type="text/css" />
|
|
<link href="app.css" rel="stylesheet" type="text/css" />
|
|
</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>
|
|
<!-- End Google Tag Manager -->
|
|
|
|
<div id="sidebar-menu" class="split split-horizontal" style=""></div>
|
|
<div id="main-content" class="split split-horizontal container-fluid" style="">
|
|
<div class="keymap keymap--qwerty">
|
|
<div class="row">
|
|
<h1 class="col-xs-12 pane-title">
|
|
<i class="fa fa-keyboard-o"></i>
|
|
<span class="keymap__name" contenteditable="true">QWERTY</span> keymap (<span class="keymap__abbrev" contenteditable="true">QTY</span>)
|
|
<i class="fa fa-star-o fa-star keymap__is-default"></i>
|
|
</h1>
|
|
</div>
|
|
<div class="row">
|
|
</div>
|
|
<div class="row unk--wrapper">
|
|
<div class="col-xs-12 text-center">
|
|
<div class="" role="" style="margin-bottom: 2rem;">
|
|
<button type="button" class="btn btn-primary btn-lg">Base</button>
|
|
<button type="button" class="btn btn-default btn-lg">Mod</button>
|
|
<button type="button" class="btn btn-default btn-lg">Fn</button>
|
|
<button type="button" class="btn btn-default btn-lg">Mouse</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12">
|
|
<div id="owl-example" class="owl-carousel owl-theme">
|
|
<div class="item col-xs-12 uhk__layer-wrapper uhk__layer-wrapper--base">
|
|
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
|
</div>
|
|
<div class="item col-xs-12 uhk__layer-wrapper uhk__layer-wrapper--mod">
|
|
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
|
</div>
|
|
<div class="item col-xs-12 uhk__layer-wrapper uhk__layer-wrapper--fn">
|
|
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
|
</div>
|
|
<div class="item col-xs-12 uhk__layer-wrapper uhk__layer-wrapper--mouse">
|
|
<img src="./images/base-layer.svg" class="uhk uhk--base-layer" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
|
|
<script type="text/javascript" src="bower_components/handlebars/handlebars.js"></script>
|
|
<script type="text/javascript" src="bower_components/owl.carousel/dist/owl.carousel.js"></script>
|
|
<script type="text/javascript" src="./app.js"></script>
|
|
|
|
<script type="text/x-handlebars-template" id="sidebar-menu--source">
|
|
{{#if menu}}
|
|
<ul class="menu--top">
|
|
{{#each menu as |menuValue menuKey|}}
|
|
<li class="sidebar__level-1--item">
|
|
<div class="sidebar__level-1">
|
|
<i class='fa fa-{{icon}}'></i> {{name}} <!--<span class="small-text">collapse</span>-->
|
|
{{#if expandable}}
|
|
<a href="#" class="btn btn-default pull-right btn-sm">
|
|
<i class="fa fa-plus"></i>
|
|
</a>
|
|
{{/if}}
|
|
<i class="fa fa-chevron-up pull-right" style=""></i>
|
|
</div>
|
|
{{#if children}}
|
|
<ul>
|
|
{{#each children}}
|
|
<li class="sidebar__level-2--item {{classes}}">
|
|
<div class="sidebar__level-2">
|
|
{{name}}
|
|
{{#if menuValue.hasDefaults}}
|
|
{{#if isDefault}}
|
|
<i class="fa fa-star pull-right"></i>
|
|
{{else}}
|
|
<i class="fa fa-star-o pull-right"></i>
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
{{/if}}
|
|
{{#if actions}}
|
|
<ul class="sidebar__actions--list">
|
|
{{#each actions}}
|
|
<li class="sidebar__action--item">
|
|
<a href="#" class="btn btn-default btn-xs sidebar__action">
|
|
<i class="fa fa-{{icon}}"></i> {{name}}
|
|
</a>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
{{/if}}
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
{{/if}}
|
|
{{#if menuBottom}}
|
|
<ul class="menu--bottom">
|
|
{{#each menuBottom}}
|
|
<li class="sidebar__level-2--item">
|
|
<div class="sidebar__level-1"><i class='fa fa-{{icon}}'></i> {{name}}</div>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
{{/if}}
|
|
</script>
|
|
</body>
|
|
</html>
|