ArrowKeyControl

├── rendered.png ├── README.md ├── LICENSE └── src ├── index.html └── logo.css /rendered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloopletech/akc-icon/master/rendered.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # How to render icon 2 | 3 | 1. Open src/index.html in Chrome. 4 | 2. Open DevTools. 5 | 3. Click the "Toggle Device Toolbar" icon in the top menubar of the DevTools to show the device toolbar. 6 | 4. Select "Responsive" from the device toolbar. 7 | 5. Enter width as 1536 in the device toolbar. 8 | 6. Enter height as 1536 in the device toolbar. 9 | 7. Click the "⋮" in the device toolbar. 10 | 8. Click "Capture full size screenshot". 11 | 9. Copy the generated file (file location will be in /Downloads) into this project directory as rendered.png 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018 Brenton Fletcher (i@bloople.net) 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ArrowKeyControl 6 | 7 | 8 | 9 | 10 | 11 |

12 |

13 |

14 | 18 | 24 |

25 |

26 |

27 | 28 | 29 | -------------------------------------------------------------------------------- /src/logo.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 3 | line-height: 1.4; 4 | box-sizing: border-box; 5 | user-select: none; 6 | } 7 | 8 | html, body { 9 | width: 1536px; 10 | height: 1536px; 11 | } 12 | 13 | body { 14 | margin: 0; 15 | background-color: #fff; 16 | color: #000; 17 | background: linear-gradient(90deg, rgba(158,1,66,0.4) 0%, rgba(213,62,79,0.4) 10%, rgba(244,109,67,0.4) 20%, rgba(253,174,97,0.4) 30%, rgba(254,224,139,0.4) 40%, rgba(255,255,191,0.4) 50%, rgba(230,245,152,0.4) 60%, rgba(171,221,164,0.4) 70%, rgba(102,194,165,0.4) 80%, rgba(50,136,189,0.4) 90%, rgba(94,79,162,0.4) 100%), 18 | linear-gradient(180deg, rgba(158,1,66,0.4) 0%, rgba(213,62,79,0.4) 10%, rgba(244,109,67,0.4) 20%, rgba(253,174,97,0.4) 30%, rgba(254,224,139,0.4) 40%, rgba(255,255,191,0.4) 50%, rgba(230,245,152,0.4) 60%, rgba(171,221,164,0.4) 70%, rgba(102,194,165,0.4) 80%, rgba(50,136,189,0.4) 90%, rgba(94,79,162,0.4) 100%); 19 | background-blend-mode: lighten; 20 | background-repeat: no-repeat; 21 | font-size: 16px; 22 | 23 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 24 | 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | flex-direction: column; 29 | } 30 | 31 | #game { 32 | width: 100%; 33 | height: 100%; 34 | position: relative; 35 | text-align: center; 36 | font-size: 30px; 37 | z-index: 1; 38 | padding: 0; 39 | } 40 | 41 | body.playing #playing { 42 | display: flex; 43 | } 44 | 45 | .layer { 46 | display: none; 47 | position: relative; 48 | height: 100%; 49 | align-items: center; 50 | justify-content: center; 51 | flex-direction: column; 52 | } 53 | 54 | #playing { 55 | justify-content: center; 56 | } 57 | 58 | #time-remaining { 59 | display: none; 60 | width: 100%; 61 | height: 100%; 62 | stroke: #3137a3; 63 | } 64 | 65 | #up, #right, #down, #left { 66 | display: none; 67 | } 68 | 69 | body.up #up, body.right #right, body.down #down, body.left #left { 70 | display: block; 71 | } 72 | --------------------------------------------------------------------------------