requirements:
- only 2 types of keycaps
- most keys in their traditional position
- physical navigation keys
[ | |
{ | |
"backcolor": "#7a7a7a", | |
"name": "DELTA-78", | |
"author": "albx79", | |
"background": { | |
"name": "Steel brushed horizontal", | |
"style": "background-image: url('/bg/metal/iron_texture66.jpg');" | |
}, | |
"radii": "30px", | |
"switchMount": "cherry", | |
"switchBrand": "cherry", | |
"plate": true, | |
"pcb": false | |
}, | |
[ | |
{ | |
"x": 7.5, | |
"c": "#d0ccc0", | |
"a": 7 | |
}, | |
"ESC", | |
{ | |
"x": 0.5, | |
"c": "#cccccc", | |
"t": "#ffffff", | |
"a": 5, | |
"w": 2, | |
"h": 0.5, | |
"d": true | |
}, | |
"\n<span class=\"title spaced\">ΔV</span><sup><span class=\"title spaced\">78</span>", | |
{ | |
"x": 0.5, | |
"c": "#d0ccc0", | |
"t": "#000000", | |
"a": 7, | |
"fa": [ | |
4 | |
] | |
}, | |
"<i class='fa fa-power-off'></i>\n\n\n\n<i class='fa fa-moon-o'></i>" | |
], | |
[ | |
{ | |
"y": -0.5, | |
"x": 9, | |
"fa": [ | |
6 | |
] | |
}, | |
"⎀", | |
{ | |
"f": 3 | |
}, | |
"⌦" | |
], | |
[ | |
{ | |
"y": 0.25, | |
"x": 9, | |
"f": 3 | |
}, | |
"⇱", | |
{ | |
"f": 3 | |
}, | |
"⇞" | |
], | |
[ | |
{ | |
"x": 9, | |
"f": 3 | |
}, | |
"⇲", | |
{ | |
"f": 3 | |
}, | |
"⇟" | |
], | |
[ | |
{ | |
"y": 0.25, | |
"x": 9.5, | |
"f": 3 | |
}, | |
"↑" | |
], | |
[ | |
{ | |
"c": "#cccccc", | |
"a": 5, | |
"d": true | |
}, | |
"\n<img src=\"http://icons.iconarchive.com/icons/icons8/windows-8/32/Mobile-Nfc-Logo-icon.png\">", | |
{ | |
"x": 7.5, | |
"c": "#d0ccc0", | |
"a": 7, | |
"f": 3 | |
}, | |
"←", | |
{ | |
"f": 3 | |
}, | |
"↓", | |
{ | |
"f": 3 | |
}, | |
"→", | |
{ | |
"x": 7.25, | |
"c": "#cccccc", | |
"a": 5, | |
"d": true | |
}, | |
"\n<img src=\"http://icons.iconarchive.com/icons/icons8/windows-8/32/Security-Fingerprint-Scan-icon.png\">" | |
], | |
[ | |
{ | |
"rx": 17, | |
"ry": 9.25, | |
"y": -9.25, | |
"x": -10.5, | |
"t": "#00ff00", | |
"a": 4, | |
"d": true | |
}, | |
"\n<span class=\"title\">⤓</span>\n\n<span class=\"title\">1</span>\n\n\n<i class='fa fa-minus'></i>\n<i class='fa fa-minus'></i>\n\n<i class='fa fa-minus'></i>\n<span class=\"title\">A</span>", | |
{ | |
"x": 5, | |
"d": true | |
}, | |
"\n<i class='fa fa-moon-o title'></i>\n\n<span class=\"title\">F</span>\n\n\n<i class='fa fa-minus'></i>\n<i class='fa fa-minus'></i>\n\n<i class='fa fa-minus'></i>\n<span class=\"title\">N</span>" | |
], | |
[ | |
{ | |
"r": 10, | |
"rx": 3.75, | |
"ry": 3.5, | |
"y": -3, | |
"x": -3.25, | |
"c": "#00a4a9", | |
"t": "#d0ccc0", | |
"f": 3, | |
"w": 1.5 | |
}, | |
"¬\n`\n\n|", | |
{ | |
"c": "#d0ccc0", | |
"t": "#000000" | |
}, | |
"\n1\n\n\nF1", | |
"\n2\n\n\nF2", | |
"\n3\n\n\nF3", | |
"\n4\n\n\nF4", | |
"\n5\n\n\nF5", | |
{ | |
"a": 5, | |
"f": 3 | |
}, | |
"±\n§\n\n\n<i class='kb kb-Multimedia-Eject'></i>" | |
], | |
[ | |
{ | |
"x": -3.25, | |
"c": "#00a4a9", | |
"t": "#cccccc", | |
"a": 7, | |
"fa": [ | |
8 | |
], | |
"w": 1.5 | |
}, | |
"<i class='kb kb-Line-Start-End'></i>", | |
{ | |
"c": "#d0ccc0", | |
"t": "#000000", | |
"a": 4, | |
"f": 3 | |
}, | |
"Q", | |
{ | |
"f": 3 | |
}, | |
"W", | |
{ | |
"f": 3 | |
}, | |
"E", | |
{ | |
"f": 3 | |
}, | |
"R", | |
{ | |
"f": 3 | |
}, | |
"T\n\n\n\n<i class='kb kb-Multimedia-FastForward-End'></i>", | |
{ | |
"f": 3 | |
}, | |
"{\n[\n\n\n◼" | |
], | |
[ | |
{ | |
"x": -3.25, | |
"c": "#00a4a9", | |
"t": "#d0ccc0", | |
"a": 7, | |
"f": 3, | |
"w": 1.5 | |
}, | |
"Fn", | |
{ | |
"c": "#d0ccc0", | |
"t": "#000000", | |
"a": 4, | |
"f": 3 | |
}, | |
"A\n\n\n\n<i class='fa fa-lock'></i>A", | |
{ | |
"f": 3 | |
}, | |
"S\n\n\n\n<i class='fa fa-lock'></i>1", | |
{ | |
"f": 3 | |
}, | |
"D\n\n\n\n<i class='fa fa-lock'></i>⤓", | |
{ | |
"f": 3, | |
"n": true | |
}, | |
"F", | |
{ | |
"f": 3 | |
}, | |
"G\n\n\n\n<i class='kb kb-Multimedia-Rewind-Start'></i>", | |
{ | |
"f": 3 | |
}, | |
"~\n#" | |
], | |
[ | |
{ | |
"x": -3.25, | |
"c": "#00a4a9", | |
"t": "#cccccc", | |
"a": 7, | |
"fa": [ | |
6 | |
], | |
"w": 1.5 | |
}, | |
"⇑", | |
{ | |
"c": "#d0ccc0", | |
"t": "#000000", | |
"a": 4, | |
"f": 3 | |
}, | |
"Z", | |
{ | |
"f": 3 | |
}, | |
"X", | |
{ | |
"f": 3 | |
}, | |
"C", | |
{ | |
"f": 3 | |
}, | |
"V", | |
{ | |
"f": 3 | |
}, | |
"B\n\n\n\n<i class='kb kb-Multimedia-Play-Pause'></i>", | |
{ | |
"c": "#00a4a9", | |
"t": "#ffffff", | |
"a": 5, | |
"fa": [ | |
6, | |
1 | |
], | |
"w": 1.5 | |
}, | |
"\nscreen<br/>shot\n\n\n\n\n<i class='fa fa-camera'></i>" | |
], | |
[ | |
{ | |
"x": -3.25, | |
"t": "#d0ccc0", | |
"a": 7, | |
"f": 3, | |
"w": 1.5 | |
}, | |
"CTRL", | |
{ | |
"c": "#d0ccc0", | |
"t": "#000000", | |
"a": 4, | |
"f": 3 | |
}, | |
"|\n\\", | |
{ | |
"c": "#00a4a9", | |
"t": "#ffffff", | |
"a": 7, | |
"f": 6, | |
"w": 1.5 | |
}, | |
"◆", | |
{ | |
"f": 3, | |
"w": 1.5 | |
}, | |
"ALT", | |
{ | |
"t": "#d0ccc0", | |
"w": 1.5 | |
}, | |
"SPACE" | |
], | |
[ | |
{ | |
"r": -10, | |
"rx": 17, | |
"ry": 9.25, | |
"y": -8.75, | |
"x": -4, | |
"c": "#d0ccc0", | |
"t": "#000000", | |
"a": 4 | |
}, | |
"+\n=", | |
"\n6\n\n\nF6", | |
{ | |
"t": "#000000\n\n\n#00a4a9" | |
}, | |
"\n7\n\n⎚\nF7", | |
"\n8\n\n=\nF8", | |
"\n9\n\n/\nF9", | |
"\n0\n\n*\nF10", | |
{ | |
"c": "#00a4a9", | |
"t": "#d0ccc0", | |
"a": 7, | |
"w": 1.5 | |
}, | |
"⌫" | |
], | |
[ | |
{ | |
"x": -4, | |
"c": "#d0ccc0", | |
"t": "#000000", | |
"a": 4 | |
}, | |
"}\n]", | |
"Y\n\n\n\n<i class='kb kb-Multimedia-Volume-Up-2'></i>", | |
{ | |
"t": "#000000\n\n\n#00a4a9" | |
}, | |
"U\n\n\n7", | |
"I\n\n\n8", | |
"O\n\n\n9\nF11", | |
"P\n\n\n-\nF12", | |
{ | |
"c": "#00a4a9", | |
"t": "#d0ccc0", | |
"a": 7, | |
"w": 1.5 | |
}, | |
"Fn" | |
], | |
[ | |
{ | |
"x": -4, | |
"c": "#d0ccc0", | |
"t": "#000000", | |
"a": 4 | |
}, | |
"_\n-", | |
"H\n\n\n\n<i class='kb kb-Multimedia-Volume-Down-2'></i>", | |
{ | |
"t": "#000000\n\n\n#00a4a9", | |
"n": true | |
}, | |
"J\n\n\n4", | |
"K\n\n\n5", | |
"L\n\n\n6", | |
":\n;\n\n+", | |
{ | |
"c": "#00a4a9", | |
"t": "#ffffff", | |
"a": 7, | |
"f": 6, | |
"w": 1.5 | |
}, | |
"⏎" | |
], | |
[ | |
{ | |
"x": -4.5, | |
"a": 5, | |
"fa": [ | |
0, | |
1, | |
0, | |
0, | |
0, | |
0, | |
3 | |
], | |
"w": 1.5 | |
}, | |
"\ncompose\n\n\n\n\n⎄", | |
{ | |
"c": "#d0ccc0", | |
"t": "#000000", | |
"a": 4, | |
"f": 3 | |
}, | |
"N\n\n\n\n<i class='kb kb-Multimedia-Mute-2'></i>", | |
{ | |
"t": "#000000\n\n\n#00a4a9" | |
}, | |
"M\n\n\n1", | |
"<\n,\n\n2", | |
">\n.\n\n3\n<i class='kb kb-Unicode-Pause-2'></i>|<i class='kb kb-Unicode-Break-2'></i>", | |
{ | |
"fa": [ | |
0, | |
0, | |
0, | |
6 | |
] | |
}, | |
"?\n/\n\n⎆", | |
{ | |
"c": "#00a4a9", | |
"t": "#cccccc", | |
"a": 7, | |
"f": 6, | |
"w": 1.5 | |
}, | |
"⇑" | |
], | |
[ | |
{ | |
"x": -3.5, | |
"t": "#d0ccc0", | |
"f": 3, | |
"w": 1.5 | |
}, | |
"SPACE", | |
{ | |
"t": "#ffffff", | |
"w": 1.5 | |
}, | |
"ALT·GR", | |
{ | |
"a": 4, | |
"f": 6, | |
"fa": [ | |
0, | |
0, | |
0, | |
3 | |
], | |
"w": 1.5 | |
}, | |
"\n\n\n0\n\n\n\n\n\n▤", | |
{ | |
"c": "#d0ccc0", | |
"t": "#000000\n\n\n#00a4a9", | |
"f": 3 | |
}, | |
"@\n'\n\n.", | |
{ | |
"c": "#00a4a9", | |
"t": "#d0ccc0", | |
"a": 7, | |
"w": 1.5 | |
}, | |
"CTRL" | |
] | |
] |
requirements:
.title { | |
color: transparent; | |
background-image: url('https://st2.depositphotos.com/3768069/5421/i/450/depositphotos_54214713-stock-photo-ice-blue-anodized-aluminum-brushed.jpg'); | |
background-position: center; | |
background-clip:text; | |
-webkit-background-clip:text; | |
font-weight: bold; | |
} | |
.spaced { | |
font-family: sans-serif; | |
letter-spacing: 3px; | |
} | |
.staging { | |
background-image: url('http://www.texturex.com/cache/Metal-Textures/textureX%20rusty%20grungy%20metal%20dirty%20iron%20scratch%20urban%20city%20Texture__150_cw150_ch150_thumb.jpg'); | |
background-image: url('http://www.texturex.com/cache/Metal-Textures/TextureX%20Brushed%20Spin%20Aluminum%20Metal%20Texture%20Stock%20Texture_800.jpg'); | |
background-image: url('http://www.texturex.com/cache/Metal-Textures/metal%20art%20texture%20color%20brushed%20polished%20abtract%20colorful%20metallic_800.jpg'); | |
background-image: url('http://www.texturex.com/cache/Metal-Textures/TextureX%20Brushed%20Golden%20Metal%20Photo%20Stock%20Texture_800.jpg'); | |
} | |
.anodized { | |
background-image: url('https://st2.depositphotos.com/3768069/5421/i/450/depositphotos_54214713-stock-photo-ice-blue-anodized-aluminum-brushed.jpg'); | |
background-image: url('http://www.allpowderpaints.com/images/products/preview/pcmb65609.jpg'); | |
} |