jfinn
/
wbo1


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
							<!DOCTYPE html>
<html lang="{{language}}">

<head>
	<meta charset="utf-8" />
	<title>{{board}} | WBO | Collaborative whiteboard</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" type="text/css" href="board.css" />
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<meta name="description" content="An free online whiteboard for realtime collaboration. Draw, write text and sketch new ideas together."/>
	<meta name="keywords" content="whiteboard,collaborative,online,draw,paint,shared,realtime,wbo,whitebophir"/>
	<link rel="apple-touch-icon" href="/favicon.svg">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
	<meta property="og:title" content="{{board}} board on WBO" />
	<meta property="og:url" content="{{baseUrl}}/boards/{{boardUriComponent}}" />
	<meta property="og:image" content="{{baseUrl}}/preview/{{boardUriComponent}}" />
</head>

<body>

<div id="board">
	<svg id="canvas"
		width="500" height="500" version="1.1"
		 xmlns="http://www.w3.org/2000/svg">
		<defs id="defs"></defs>
	</svg>
</div>

<div id="loadingMessage">{{translate translations 'Loading'}}</div>

<div id="menu">
	<div id="menuItems">
		<ul id="tools" class="tools">
			<li class="tool"><span class="tool-icon"></span><span class="tool-name" data-translation="waiting">Tool template</span></li>
		</ul>

		<ul class="tools" id="settings">
			<li class="tool">
				<span class="tool-icon">
					<input type="color" id="chooseColor" value="#1913B0" />
				</span>
				<label class="tool-name" for="chooseColor">{{translate translations 'Color'}}</label>
			</li>
			<li class="tool">
				<span class="tool-icon">
					<svg viewBox="-60 -60 120 120"><circle id="sizeIndicator" cx=0 cy=0 r=10 /></svg>
				</span>
				<label class="tool-name slider" for="chooseSize">
					<span>{{translate translations 'Size'}}</span>
					<input type="range" id="chooseSize" value="10" min="1" max="50" step="1" class="rangeChooser" />
				</label>
			</li>
			<li class="tool">
					<span class="tool-icon">
						<svg viewBox="0 0 12 12">
							<pattern id="opacityPattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
								<rect x=0 y=0 width=2 height=2 fill=black />
								<rect x=2 y=2 width=2 height=2 fill=black />
								<rect x=2 y=0 width=2 height=2 fill=white />
								<rect x=0 y=2 width=2 height=2 fill=white />
							</pattern>
							<rect id="opacityIndicator" rx=1 width="100%" height="100%" fill="url(#opacityPattern)"/>
						</svg>
					</span>
					<label class="tool-name slider" for="chooseOpacity">
						<span>{{translate translations 'Opacity'}}</span>
						<input type="range" id="chooseOpacity" value="1" min="0.2" max="1" step="0.1" class="rangeChooser" />
					</label>
			</li>
		</ul>
	</div>
</div>


<script type="application/json" id="translations">{{{json translations}}}</script>
<script type="text/javascript" src="js/path-data-polyfill.js"></script>
<script type="text/javascript" src="js/minitpl.js"></script>
<script type="text/javascript" src="js/board.js"></script>
<script type="text/javascript" src="tools/pencil/pencil.js"></script>
<script type="text/javascript" src="tools/line/line.js"></script>
<script type="text/javascript" src="tools/rect/rect.js"></script>
<script type="text/javascript" src="tools/text/text.js"></script>
<script type="text/javascript" src="tools/eraser/eraser.js"></script>
<script type="text/javascript" src="tools/hand/hand.js"></script>
<script type="text/javascript" src="tools/zoom/zoom.js"></script>
<script type="text/javascript" src="/js/canvascolor/canvascolor.min.js"></script>
</body>
</html>