mirror of
https://github.com/sbrl/Nibriboard.git
synced 2018-01-10 21:33:49 +00:00
55 lines
1.9 KiB
HTML
55 lines
1.9 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>
|
|
|
|
<canvas id="canvas-main"></canvas>
|
|
|
|
<!---------------->
|
|
<link rel="stylesheet" href="Nibri.css" />
|
|
|
|
<script src="NibriClient.js" charset="utf-8"></script>
|
|
</head>
|
|
</html>
|