sbrl-github
/
Nibriboard
mirror of https://github.com/sbrl/Nibriboard.git
1
0
Fork 0
Code
Nibriboard/Nibriboard/ClientFiles/index.html

188 lines
10 KiB
HTML
Raw Blame History

<!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">
<canvas class="brush-indicator"></canvas>
<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><img src="images/icons/brush.png" aria-hidden="true" /></span>
<span class="tool-selector" data-tool-name="pan" title="Pan around the plane."><img src="images/icons/pan.png" aria-hidden="true" /></span>
<span class="tool-selector" data-tool-name="pointer" title="Point at things, but don't change them."><img src="images/icons/point.png" aria-hidden="true" /></span>
</section>
<hr />
<div class="palette">
<!-- todo figure out a better colour palette -->
<span class="palette-colour" style="background-color: #003B00;"></span>
<span class="palette-colour" style="background-color: #008700;"></span>
<span class="palette-colour" style="background-color: #00D700;"></span>
<span class="palette-colour" style="background-color: #00FF00;"></span>
<span class="palette-colour" style="background-color: #5FFF00;"></span>
<span class="palette-colour" style="background-color: #87FF00;"></span>
<span class="palette-colour" style="background-color: #AFFF00;" data-selected></span>
<span class="palette-colour" style="background-color: #D7FF00;"></span>
<br />
<span class="palette-colour" style="background-color: #B35900;"></span>
<span class="palette-colour" style="background-color: #00AF00;"></span>
<span class="palette-colour" style="background-color: #00FF5F;"></span>
<span class="palette-colour" style="background-color: #5FFF5F;"></span>
<span class="palette-colour" style="background-color: #5FFF5F;"></span>
<span class="palette-colour" style="background-color: #87FF5F;"></span>
<span class="palette-colour" style="background-color: #AFFF5F;"></span>
<span class="palette-colour" style="background-color: #D7FF5F;"></span>
<br />
<span class="palette-colour" style="background-color: #C68222;"></span>
<span class="palette-colour" style="background-color: #00FF87;"></span>
<span class="palette-colour" style="background-color: #5FFF87;"></span>
<span class="palette-colour" style="background-color: #87FF87;"></span>
<span class="palette-colour" style="background-color: #AFFF87;"></span>
<span class="palette-colour" style="background-color: #D7FF87;"></span>
<span class="palette-colour" style="background-color: #FFFF87;"></span>
<span class="palette-colour" style="background-color: #FFD7AF;"></span>
<br />
<span class="palette-colour" style="background-color: #00FFAF;"></span>
<span class="palette-colour" style="background-color: #5FFFAF;"></span>
<span class="palette-colour" style="background-color: #87FFAF;"></span>
<span class="palette-colour" style="background-color: #AFFFAF;"></span>
<span class="palette-colour" style="background-color: #D7FFAF;"></span>
<span class="palette-colour" style="background-color: #FFFFAF;"></span>
<span class="palette-colour" style="background-color: #E6C85A;"></span>
<span class="palette-colour" style="background-color: #FFAFAF;"></span>
<br />
<span class="palette-colour" style="background-color: #3B0005;"></span>
<span class="palette-colour" style="background-color: #89000B;"></span>
<span class="palette-colour" style="background-color: #FF0000;"></span>
<span class="palette-colour" style="background-color: #FF5F00;"></span>
<span class="palette-colour" style="background-color: #FF8700;"></span>
<span class="palette-colour" style="background-color: #FFAF00;"></span>
<span class="palette-colour" style="background-color: #FFD700;"></span>
<span class="palette-colour" style="background-color: #FFFF00;"></span>
<br />
<span class="palette-colour" style="background-color: #761400;"></span>
<span class="palette-colour" style="background-color: #B3000F;"></span>
<span class="palette-colour" style="background-color: #FF005F;"></span>
<span class="palette-colour" style="background-color: #FF5F5F;"></span>
<span class="palette-colour" style="background-color: #FF875F;"></span>
<span class="palette-colour" style="background-color: #FFAF5F;"></span>
<span class="palette-colour" style="background-color: #FFD75F;"></span>
<span class="palette-colour" style="background-color: #FFFF87;"></span>
<br />
<span class="palette-colour" style="background-color: #FF00D7;"></span>
<span class="palette-colour" style="background-color: #FF5FD7;"></span>
<span class="palette-colour" style="background-color: #FF87D7;"></span>
<span class="palette-colour" style="background-color: #FFAFD7;"></span>
<span class="palette-colour" style="background-color: #FF87AF;"></span>
<span class="palette-colour" style="background-color: #FF5FAF;"></span>
<span class="palette-colour" style="background-color: #FF00AF;"></span>
<span class="palette-colour" style="background-color: #FF0087;"></span>
<br />
<span class="palette-colour" style="background-color: #00FFD7;"></span>
<span class="palette-colour" style="background-color: #5FFFD7;"></span>
<span class="palette-colour" style="background-color: #87FFD7;"></span>
<span class="palette-colour" style="background-color: #AFFFD7;"></span>
<span class="palette-colour" style="background-color: #D7FFD7;"></span>
<span class="palette-colour" style="background-color: #FFFFD7;"></span>
<span class="palette-colour" style="background-color: #FFD7D7;"></span>
<span class="palette-colour" style="background-color: #FF5FFF;"></span>
<br />
<span class="palette-colour" style="background-color: #00FFFF;"></span>
<span class="palette-colour" style="background-color: #5FFFFF;"></span>
<span class="palette-colour" style="background-color: #87FFFF;"></span>
<span class="palette-colour" style="background-color: #AFFFFF;"></span>
<span class="palette-colour" style="background-color: #D7FFFF;"></span>
<span class="palette-colour" style="background-color: #FFFFFF;"></span>
<span class="palette-colour" style="background-color: #FFD7FF;"></span>
<span class="palette-colour" style="background-color: #FF87FF;"></span>
<br />
<span class="palette-colour" style="background-color: #00D7FF;"></span>
<span class="palette-colour" style="background-color: #5FD7FF;"></span>
<span class="palette-colour" style="background-color: #87D7FF;"></span>
<span class="palette-colour" style="background-color: #AFD7FF;"></span>
<span class="palette-colour" style="background-color: #D7D7FF;"></span>
<span class="palette-colour" style="background-color: #D700FF;"></span>
<span class="palette-colour" style="background-color: #FF00FF;"></span>
<br />
<span class="palette-colour" style="background-color: #005DB1;"></span>
<span class="palette-colour" style="background-color: #0072D8;"></span>
<span class="palette-colour" style="background-color: #00AFFF;"></span>
<span class="palette-colour" style="background-color: #5FAFFF;"></span>
<span class="palette-colour" style="background-color: #87AFFF;"></span>
<span class="palette-colour" style="background-color: #AFAFFF;"></span>
<span class="palette-colour" style="background-color: #D7AFFF;"></span>
<span class="palette-colour" style="background-color: #FFAFFF;"></span>
<br />
<span class="palette-colour" style="background-color: #001D4E;"></span>
<span class="palette-colour" style="background-color: #002A4E;"></span>
<span class="palette-colour" style="background-color: #0087FF;"></span>
<span class="palette-colour" style="background-color: #5F87FF;"></span>
<span class="palette-colour" style="background-color: #8787FF;"></span>
<span class="palette-colour" style="background-color: #AF87FF;"></span>
<span class="palette-colour" style="background-color: #D787FF;"></span>
<br />
<span class="palette-colour" style="background-color: #000000;"></span>
<span class="palette-colour" style="background-color: #000714;"></span>
<span class="palette-colour" style="background-color: #00163B;"></span>
<span class="palette-colour" style="background-color: #005FFF;"></span>
<span class="palette-colour" style="background-color: #5F5FFF;"></span>
<span class="palette-colour" style="background-color: #875FFF;"></span>
<span class="palette-colour" style="background-color: #AF5FFF;"></span>
<span class="palette-colour" style="background-color: #D75FFF;"></span>
<br />
<span class="palette-colour" style="background-color: #1C1C1C;"></span>
<span class="palette-colour" style="background-color: #383838;"></span>
<span class="palette-colour" style="background-color: #545454;"></span>
<span class="palette-colour" style="background-color: #707070;"></span>
<span class="palette-colour" style="background-color: #8C8C8C;"></span>
<span class="palette-colour" style="background-color: #A8A8A8;"></span>
<span class="palette-colour" style="background-color: #C4C4C4;"></span>
<span class="palette-colour" style="background-color: #EFEFEF;"></span>
</div>
</aside>
<aside id="debuginfo">
<label>Viewport:</label> <output id="debug-viewport" class="debug-value">?</output>
<br />
<label>Frame spacing:</label> <output id="debug-framespacing" class="debug-value">?</output>
<br />
<small><em><kbd>g</kbd>: toggle grid, <kbd>c</kbd>: toggle chunk higlighting</em></small>
</aside>
<canvas id="canvas-main"></canvas>
<!---------------->
<link rel="stylesheet" href="Nibri.css" />
<script src="nibriclient.bundle.js" charset="utf-8"></script>
</head>
</html>
View Git Blame Copy Permalink