47 lines
1.2 KiB
Text
47 lines
1.2 KiB
Text
<!doctype html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
svg.keyboard {
|
|
/* height: 1000;
|
|
width: 400; */
|
|
}
|
|
.key {
|
|
fill: #eee;
|
|
stroke-linejoin: round;
|
|
stroke-width: .01px;
|
|
stroke: #aaa;
|
|
/* filter: drop-shadow( 0 .05px .05px rgba(0, 0, 0, .2)); ITS SLOW!!! */
|
|
}
|
|
.key:hover {
|
|
fill: #faa;
|
|
}
|
|
.keycap_text {
|
|
fill: black;
|
|
font: normal .3px arial;
|
|
pointer-events: none;
|
|
dominant-baseline: middle;
|
|
text-anchor: middle;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 <%= total_h %> <%= total_v+1 %>" preserveAspectRatio="xMidYMid meet">
|
|
<defs>
|
|
<% keycaps.each do |name, options| %>
|
|
<polygon points="<%= options[:points] %>" id="<%= name %>"></polygon>
|
|
<% end %>
|
|
</defs>
|
|
<% keys.each do |key| %>
|
|
<g transform="translate(<%= key[:x] %>, <%= key[:y] %>)">
|
|
<use class="key" href="#<%= key[:keycap] %>"></use>
|
|
<text class="keycap_text"><%= key[:name] %></text>
|
|
</g>
|
|
<% end %>
|
|
</svg>
|
|
<script>
|
|
// document.querySelector('.keyboard').setAttribute('viewBox', '0 0 500 200')
|
|
</script>
|
|
</body>
|
|
</html>
|