<div id="help"> <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button> <h1>Help</h1> <h2>Palette</h2> <ul> <li>Left Click - Choose Color</li> <li>Right Click - Edit Color</li> </ul> <h2>Hotkeys</h2> <ul> <li><strong>Pencil:</strong> <span class="keyboard-key">B</span> or <span class="keyboard-key">1</span></li> <li><strong>Eraser:</strong> <span class="keyboard-key">R</span></li> <li><strong>Rectangle:</strong> <span class="keyboard-key">U</span></li> <li><strong>Line:</strong> <span class="keyboard-key">L</span></li> <li><strong>Fill:</strong> <span class="keyboard-key">F</span> or <span class="keyboard-key">2</span></li> <li><strong>Eyedropper:</strong> <span class="keyboard-key">E</span> or <span class="keyboard-key">3</span></li> <li><strong>Pan:</strong> <span class="keyboard-key">P</span> or <span class="keyboard-key">M</span> or <span class="keyboard-key">4</span></li> <li><strong>Zoom:</strong> <span class="keyboard-key">Z</span> or <span class="keyboard-key">5</span></li> <li><strong>Undo:</strong> Ctrl + <span class="keyboard-key">Z</span></li> <li><strong>Redo:</strong> Ctrl + <span class="keyboard-key">Y</span> or Ctrl + Alt + <span class="keyboard-key">Z</span></li> <li><strong>Rectangular selection:</strong> <span class="keyboard-key">M</span></li> </ul> <h2>Mouse Shortcuts</h2> <ul> <li><strong>Eyedropper: </strong>Alt + Click</li> <li><strong>Pan: </strong>Space + Click</li> <li><strong>Zoom: </strong>Alt + Scroll Wheel</li> </ul> <h2>Layers</h2> <ul> <li>{{svg "visible.svg" width="15" height="15" class = "default-icon"}}: show / hide layer</li> <li>{{svg "lockedpadlock.svg" width="15" height="15" class = "default-icon"}}: lock / unlock layer, when a layer is locked it's not possible to draw on it</li> <li>Right click on a layer to open the <strong>menu</strong>: <ul> <li><strong>Rename:</strong> change the name of the layer</li> <li><strong>Duplicate:</strong> duplicate the layer</li> <li><strong>Delete:</strong> delete the layer (doesn't work if there's only one layer)</li> <li><strong>Merge below:</strong> merges the selected the layer with the one below it</li> <li><strong>Flatten visible:</strong> merges all the visible layers</li> <li></strong>Flatten all:</strong> merges all the layers</li> </ul> </li> </ul> </div>