display keyboard shortcut

diff --git a/index.html b/index.html
index 1854c668cc4a6bbf9c88b00a46e917c16e892ea8..f0661c1ffad8358d1d2be19f567c8f9bdaa379da 100644 (file)
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
   <div id="nanopad">
    <div class="nanotouch">
      <span class="name"></span>
+     <span class="key"></span>
      <span class="duration"></span>
      <label class="effects"><input type="checkbox">Effects</label><br>
      <label class="loop"><input type="checkbox">Loop</label><br>

diff --git a/nanofun.css b/nanofun.css
index 85f73f05ab6179cb8f897bfd7335c526a8738ac7..c93ff9147b34031716bf815035a328281c4ee9d9 100644 (file)
--- a/nanofun.css
+++ b/nanofun.css
@@ -79,12 +79,25 @@ div.nanotouch .loop {
 
 div.nanotouch span.name {
   position: absolute;
+  z-index: 10;
+}
+
+div.nanotouch span.key {
+  position: absolute;
+  pointer-events: none;
+  right: 1ex;
+  top: 1ex;
+  opacity: 0.3;
+  font-size: 100px;
+  line-height: 50px;
+  z-index: 0;
 }
 
 div.nanotouch span.duration {
   position: absolute;
   bottom: 2ex;
   right: 1ex;
+  z-index: 10;
 }
 
 div#gitclone {

diff --git a/nanofun.js b/nanofun.js
index d84962bf5702623050e2d37fdea38d3ee584b245..5deb9c4eba92a4a24a1677b5314e6adeb8ba4ec4 100644 (file)
--- a/nanofun.js
+++ b/nanofun.js
@@ -342,6 +342,7 @@ var nanofun = function() {
     for (var i=0; i<NANOPAD_TOUCHS.length; i++) {
       var $new_touch = $nanotouch.clone();
       $new_touch.attr('data-touch', i);
+      $new_touch.find('.key').text(KEYBOARD_CODES[i]);
       $new_touch.appendTo($nanopad);
     }
     $nanotouch.remove(); /* remove template */