pixel-editor/views/popups/help.hbs

<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>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>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>