2017-01-21 17:06:19 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = 'utf-8' / >
< title > Nibriboard< / title >
< / head >
< body >
2017-02-19 13:22:35 +00:00
< aside id = "sidebar" >
2017-04-25 10:51:14 +00:00
< img class = "logo" src = "nibriboard.svg" / >
2017-04-25 18:34:03 +00:00
< div class = "top-row" >
< span class = "connection-indicator" > < / span >
< span class = "name" > Your name here< / span >
< / div >
< hr / >
< section class = "brush-settings" >
2017-10-26 14:31:43 +00:00
< canvas class = "brush-indicator" > < / canvas >
2017-04-28 11:42:34 +00:00
< input type = "range" min = "1" max = "30" step = "0.1" class = "brush-width-controls" / >
2017-04-25 18:34:03 +00:00
< / section >
< section class = "tools" >
2017-10-06 14:08:10 +00:00
< 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 >
2017-12-08 17:54:20 +00:00
< span class = "tool-selector" data-tool-name = "eraser" title = "Erase lines. Remember that you can't undo/redo yet!" > < img src = "images/icons/eraser.png" aria-hidden = "true" / > < / span >
2017-10-06 14:08:10 +00:00
< 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 >
2017-04-25 18:34:03 +00:00
< / section >
< hr / >
2017-04-25 10:45:27 +00:00
< div class = "palette" >
<!-- todo figure out a better colour palette -->
2017-10-26 13:18:58 +00:00
< 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 >
2017-07-29 21:40:59 +00:00
< 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 >
2017-07-30 21:22:16 +00:00
< br / >
2017-07-29 21:40:59 +00:00
2017-10-26 13:18:58 +00:00
< span class = "palette-colour" style = "background-color: #B35900;" > < / span >
< span class = "palette-colour" style = "background-color: #00AF00;" > < / span >
2017-07-29 21:40:59 +00:00
< 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 >
2017-07-30 21:22:16 +00:00
< br / >
2017-07-29 21:40:59 +00:00
2017-10-26 13:18:58 +00:00
< span class = "palette-colour" style = "background-color: #C68222;" > < / span >
2017-07-29 21:40:59 +00:00
< 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 >
2017-10-26 13:18:58 +00:00
< span class = "palette-colour" style = "background-color: #FFD7AF;" > < / span >
2017-07-30 21:22:16 +00:00
< br / >
2017-07-29 21:40:59 +00:00
< 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 >
2017-10-26 13:18:58 +00:00
< span class = "palette-colour" style = "background-color: #E6C85A;" > < / span >
2017-07-29 21:40:59 +00:00
< span class = "palette-colour" style = "background-color: #FFAFAF;" > < / span >
2017-07-30 21:22:16 +00:00
< 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 >
2017-07-29 21:40:59 +00:00
< 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 >
2017-07-30 21:22:16 +00:00
< span class = "palette-colour" style = "background-color: #FF0087;" > < / span >
< br / >
2017-07-29 21:40:59 +00:00
< 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 >
2017-07-30 21:22:16 +00:00
< span class = "palette-colour" style = "background-color: #FF5FFF;" > < / span >
< br / >
2017-07-29 21:40:59 +00:00
< 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 >
2017-07-30 21:22:16 +00:00
< br / >
2017-07-29 21:40:59 +00:00
< 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 >
2017-07-30 21:22:16 +00:00
< span class = "palette-colour" style = "background-color: #D700FF;" > < / span >
< span class = "palette-colour" style = "background-color: #FF00FF;" > < / span >
< br / >
2017-07-29 21:40:59 +00:00
2017-07-30 21:22:16 +00:00
< span class = "palette-colour" style = "background-color: #005DB1;" > < / span >
< span class = "palette-colour" style = "background-color: #0072D8;" > < / span >
2017-07-29 21:40:59 +00:00
< 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 >
2017-07-30 21:22:16 +00:00
< 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 >
2017-07-29 21:40:59 +00:00
< 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 >
2017-07-30 21:22:16 +00:00
< br / >
2017-07-29 21:40:59 +00:00
2017-07-30 21:22:16 +00:00
< 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 >
2017-07-29 21:40:59 +00:00
< 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 >
2017-07-30 21:22:16 +00:00
< br / >
2017-07-29 21:40:59 +00:00
< 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 >
2017-07-30 21:22:16 +00:00
< span class = "palette-colour" style = "background-color: #EFEFEF;" > < / span >
2017-07-29 21:40:59 +00:00
2017-04-25 10:45:27 +00:00
< / div >
2017-06-15 12:12:30 +00:00
< / aside >
< aside id = "debuginfo" >
2017-06-15 16:20:22 +00:00
< label > Viewport:< / label > < output id = "debug-viewport" class = "debug-value" > ?< / output >
2017-06-24 19:24:56 +00:00
< br / >
2017-12-15 15:45:49 +00:00
< label > Cursor:< / label > < output id = "debug-cursor" class = "debug-value" > ?< / output >
< br / >
2017-06-24 19:24:56 +00:00
< label > Frame spacing:< / label > < output id = "debug-framespacing" class = "debug-value" > ?< / output >
< br / >
2017-06-26 16:18:37 +00:00
< small > < em > < kbd > g< / kbd > : toggle grid, < kbd > c< / kbd > : toggle chunk higlighting< / em > < / small >
2017-02-19 13:22:35 +00:00
< / aside >
2017-01-21 17:06:19 +00:00
< canvas id = "canvas-main" > < / canvas >
<!-- - - - - - - - - - - - - -->
< link rel = "stylesheet" href = "Nibri.css" / >
2017-11-09 21:30:03 +00:00
< script src = "nibriclient.bundle.js" charset = "utf-8" > < / script >
2017-01-21 17:06:19 +00:00
< / head >
< / html >