wip
This commit is contained in:
parent
a4f87b0d88
commit
a6e0372cd5
4 changed files with 40 additions and 0 deletions
40
experiments/keyboard/keyboard.html
Normal file
40
experiments/keyboard/keyboard.html
Normal file
|
@ -0,0 +1,40 @@
|
|||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
svg.keyboard {
|
||||
/* height: 1000;
|
||||
width: 400; */
|
||||
}
|
||||
.keycap_text {
|
||||
fill: white;
|
||||
font: normal 3px sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg class="keycaps" display="none">
|
||||
<defs>
|
||||
<polygon points="-3.6,-3.6 3.6,-3.6 3.6,3.6 -3.6,3.6" id="default"></polygon>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 200 80" preserveAspectRatio="xMidYMid meet">
|
||||
<g transform="translate(4, 4)">
|
||||
<use href="#default" class="key_esc"></use>
|
||||
<text class="keycap_text" color="white" dominant-baseline="middle" text-anchor="middle">CTRL</text>
|
||||
</g>
|
||||
<use href="#default" class="key_f1" x="16" y="4"></use>
|
||||
<use href="#default" class="key_f2" x="24" y="4"></use>
|
||||
<use href="#default" class="key_f3" x="32" y="4"></use>
|
||||
<use href="#default" class="key_f4" x="40" y="4"></use>
|
||||
<use href="#default" class="key_f5" x="52" y="4"></use>
|
||||
<use href="#default" class="key_f6" x="60" y="4"></use>
|
||||
<use href="#default" class="key_f7" x="68" y="4"></use>
|
||||
<use href="#default" class="key_f8" x="76" y="4"></use>
|
||||
</svg>
|
||||
<script>
|
||||
// document.querySelector('.keyboard').setAttribute('viewBox', '0 0 500 200')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in a new issue