59 lines
2.1 KiB
HTML
59 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8' />
|
|
<title>Nibriboard</title>
|
|
</head>
|
|
<body>
|
|
<aside id="sidebar">
|
|
<img class="logo" src="nibriboard.svg" />
|
|
<div class="top-row">
|
|
<span class="connection-indicator"></span>
|
|
<span class="name">Your name here</span>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<section class="brush-settings">
|
|
<div class="brush-preview-display">
|
|
<div class="brush-indicator"></div>
|
|
</div>
|
|
<input type="range" min="1" max="30" step="0.1" class="brush-width-controls" />
|
|
</section>
|
|
|
|
<section class="tools">
|
|
<span class="tool-selector" data-tool-name="brush" title="Draw lines with a brush." data-selected>🖌</span>
|
|
<span class="tool-selector" data-tool-name="pan" title="Pan around the plane.">↔</span>
|
|
<span class="tool-selector" data-tool-name="pointer" title="Point at things, but don't change them.">✹</span>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<div class="palette">
|
|
<!-- todo figure out a better colour palette -->
|
|
<span class="palette-colour" style="background-color: white;"></span>
|
|
<span class="palette-colour" style="background-color: black;"></span>
|
|
<span class="palette-colour" style="background-color: red;"></span>
|
|
<span class="palette-colour" style="background-color: orange;" data-selected></span>
|
|
<span class="palette-colour" style="background-color: darkgreen;"></span>
|
|
<span class="palette-colour" style="background-color: blue;"></span>
|
|
<span class="palette-colour" style="background-color: purple;"></span>
|
|
<span class="palette-colour" style="background-color: pink;"></span>
|
|
<span class="palette-colour" style="background-color: saddlebrown;"></span>
|
|
</div>
|
|
</aside>
|
|
|
|
<aside id="debuginfo">
|
|
<label>Viewport:</label> <output id="debug-viewport" class="debug-value">?</output>
|
|
<small><em><kbd>g</kbd>: toggle grid, <kbd>c</kbd>: toggle chunk higlighting</small>
|
|
</aside>
|
|
|
|
<canvas id="canvas-main"></canvas>
|
|
|
|
<!---------------->
|
|
<link rel="stylesheet" href="Nibri.css" />
|
|
|
|
<script src="NibriClient.js" charset="utf-8"></script>
|
|
</head>
|
|
</html>
|