whitebophir/client-data/board.html

94 lines
3.6 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
2019-06-23 07:47:01 +00:00
<html lang="{{language}}">
<head>
<meta charset="utf-8" />
2020-04-21 23:12:50 +00:00
<title>{{board}} | WBO | {{translations.collaborative_whiteboard}}</title>
2013-10-03 14:24:45 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1" />
2013-10-22 18:22:47 +00:00
<link rel="stylesheet" type="text/css" href="board.css" />
<script src="/socket.io/socket.io.js"></script>
2020-04-21 23:12:50 +00:00
<meta name="description" content="{{translations.tagline}}'" />
2019-06-27 13:46:39 +00:00
<meta name="keywords"
2020-04-21 23:12:50 +00:00
content="{{translations.collaborative_whiteboard}},online,draw,paint,shared,realtime,wbo,whitebophir" />
2018-11-28 17:27:08 +00:00
<link rel="apple-touch-icon" href="/favicon.svg">
2019-06-27 13:46:39 +00:00
<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}}" />
2019-06-27 13:44:16 +00:00
<link rel="canonical" href="{{baseUrl}}/boards/{{boardUriComponent}}?lang={{language}}" />
{{#languages}}
2019-06-27 13:46:39 +00:00
<link rel="alternate" hreflang="{{.}}" href="{{../baseUrl}}/boards/{{../boardUriComponent}}?lang={{.}}" />
2019-06-27 13:44:16 +00:00
{{/languages}}
</head>
<body>
2019-06-27 13:46:39 +00:00
<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>
2020-04-21 23:12:50 +00:00
<div id="loadingMessage">{{translations.loading}}</div>
2019-06-25 11:28:02 +00:00
2019-06-27 13:46:39 +00:00
<div id="menu">
<div id="menuItems">
<ul id="tools" class="tools">
2020-04-25 20:33:02 +00:00
<li class="tool">
Style changes (#39) * Initial Changes (#1) * Move socket event handlers and initial connection to connect function * Converted await statements to .then() * Toggle tool if clicked again and toggling option exists Co-authored-by: Finn Böger <finnboeger@googlemail.com> Co-authored-by: Robert Beach <rdbeach@gmail.com> * Updated client styles - disable selecting text in tool menu - change design of tool boxes to be square and smaller - reduce text size in sliders Co-authored-by: Finn Böger <finnboeger@googlemail.com> * Changed Apple Touch Icon * Update size and opacity icon, include fontawesome for future use Co-authored-by: Finn Böger <finnboeger@googlemail.com> * Changed favicon svg * replace font-family with valid value * Added icons and icomoon font * change eraser and zoom icon Co-authored-by: Finn Böger <finnboeger@googlemail.com> * Revert icon change for now * Revert "Converted await statements to .then()" This reverts commit b35e0207df4515eeff17a004e31f04b73eea5dfb. * Revert "Revert icon change for now" This reverts commit 34e354f00fab0ad137772a7a6e04e759710452c0. * Restored new Icons * Restored favicon * Remove fontawesome * Increase icon sizes * Update the zoom icon See https://github.com/lovasoa/whitebophir/pull/39#issuecomment-619524098 * set display inline block for tool names, otherwise firefox doesn't respect margin-bottom * Rework tool icons * fix color presets position Co-authored-by: finnboeger <finnboeger@users.noreply.github.com> Co-authored-by: Robert Beach <rdbeach@gmail.com> Co-authored-by: Finn Böger <finnboeger@googlemail.com>
2020-04-26 12:56:51 +00:00
<img class="tool-icon" width="35" height="35" src="" alt="icon" /><span class="tool-name"></span>
2020-04-25 20:33:02 +00:00
</li>
2019-06-27 13:46:39 +00:00
</ul>
2019-06-27 13:46:39 +00:00
<ul class="tools" id="settings">
<li class="tool">
2020-04-25 22:45:42 +00:00
<input class="tool-icon" type="color" id="chooseColor" value="#1913B0" />
2020-04-21 23:12:50 +00:00
<label class="tool-name" for="chooseColor">{{translations.color}}</label>
<span class="colorPresets" id="colorPresetSel">
<span class="colorPresetButton"></span>
</span>
2019-06-27 13:46:39 +00:00
</li>
<li class="tool">
2020-04-25 22:45:42 +00:00
<img class="tool-icon" width="60" height="60" src="icon-size.svg" alt="size" />
2019-06-27 13:46:39 +00:00
<label class="tool-name slider" for="chooseSize">
2020-04-21 23:12:50 +00:00
<span>{{translations.size}}</span>
2020-04-15 12:49:49 +00:00
<input type="range" id="chooseSize" value="4" min="1" max="50" step="1" class="rangeChooser" />
2019-06-27 13:46:39 +00:00
</label>
</li>
<li class="tool">
2019-06-19 10:09:06 +00:00
<span class="tool-icon">
Style changes (#39) * Initial Changes (#1) * Move socket event handlers and initial connection to connect function * Converted await statements to .then() * Toggle tool if clicked again and toggling option exists Co-authored-by: Finn Böger <finnboeger@googlemail.com> Co-authored-by: Robert Beach <rdbeach@gmail.com> * Updated client styles - disable selecting text in tool menu - change design of tool boxes to be square and smaller - reduce text size in sliders Co-authored-by: Finn Böger <finnboeger@googlemail.com> * Changed Apple Touch Icon * Update size and opacity icon, include fontawesome for future use Co-authored-by: Finn Böger <finnboeger@googlemail.com> * Changed favicon svg * replace font-family with valid value * Added icons and icomoon font * change eraser and zoom icon Co-authored-by: Finn Böger <finnboeger@googlemail.com> * Revert icon change for now * Revert "Converted await statements to .then()" This reverts commit b35e0207df4515eeff17a004e31f04b73eea5dfb. * Revert "Revert icon change for now" This reverts commit 34e354f00fab0ad137772a7a6e04e759710452c0. * Restored new Icons * Restored favicon * Remove fontawesome * Increase icon sizes * Update the zoom icon See https://github.com/lovasoa/whitebophir/pull/39#issuecomment-619524098 * set display inline block for tool names, otherwise firefox doesn't respect margin-bottom * Rework tool icons * fix color presets position Co-authored-by: finnboeger <finnboeger@users.noreply.github.com> Co-authored-by: Robert Beach <rdbeach@gmail.com> Co-authored-by: Finn Böger <finnboeger@googlemail.com>
2020-04-26 12:56:51 +00:00
<svg viewBox="0 0 8 8">
2019-06-19 10:09:06 +00:00
<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 />
Style changes (#39) * Initial Changes (#1) * Move socket event handlers and initial connection to connect function * Converted await statements to .then() * Toggle tool if clicked again and toggling option exists Co-authored-by: Finn Böger <finnboeger@googlemail.com> Co-authored-by: Robert Beach <rdbeach@gmail.com> * Updated client styles - disable selecting text in tool menu - change design of tool boxes to be square and smaller - reduce text size in sliders Co-authored-by: Finn Böger <finnboeger@googlemail.com> * Changed Apple Touch Icon * Update size and opacity icon, include fontawesome for future use Co-authored-by: Finn Böger <finnboeger@googlemail.com> * Changed favicon svg * replace font-family with valid value * Added icons and icomoon font * change eraser and zoom icon Co-authored-by: Finn Böger <finnboeger@googlemail.com> * Revert icon change for now * Revert "Converted await statements to .then()" This reverts commit b35e0207df4515eeff17a004e31f04b73eea5dfb. * Revert "Revert icon change for now" This reverts commit 34e354f00fab0ad137772a7a6e04e759710452c0. * Restored new Icons * Restored favicon * Remove fontawesome * Increase icon sizes * Update the zoom icon See https://github.com/lovasoa/whitebophir/pull/39#issuecomment-619524098 * set display inline block for tool names, otherwise firefox doesn't respect margin-bottom * Rework tool icons * fix color presets position Co-authored-by: finnboeger <finnboeger@users.noreply.github.com> Co-authored-by: Robert Beach <rdbeach@gmail.com> Co-authored-by: Finn Böger <finnboeger@googlemail.com>
2020-04-26 12:56:51 +00:00
<rect x=2 y=0 width=2 height=2 fill=#eeeeee />
<rect x=0 y=2 width=2 height=2 fill=#eeeeee />
2019-06-19 10:09:06 +00:00
</pattern>
Style changes (#39) * Initial Changes (#1) * Move socket event handlers and initial connection to connect function * Converted await statements to .then() * Toggle tool if clicked again and toggling option exists Co-authored-by: Finn Böger <finnboeger@googlemail.com> Co-authored-by: Robert Beach <rdbeach@gmail.com> * Updated client styles - disable selecting text in tool menu - change design of tool boxes to be square and smaller - reduce text size in sliders Co-authored-by: Finn Böger <finnboeger@googlemail.com> * Changed Apple Touch Icon * Update size and opacity icon, include fontawesome for future use Co-authored-by: Finn Böger <finnboeger@googlemail.com> * Changed favicon svg * replace font-family with valid value * Added icons and icomoon font * change eraser and zoom icon Co-authored-by: Finn Böger <finnboeger@googlemail.com> * Revert icon change for now * Revert "Converted await statements to .then()" This reverts commit b35e0207df4515eeff17a004e31f04b73eea5dfb. * Revert "Revert icon change for now" This reverts commit 34e354f00fab0ad137772a7a6e04e759710452c0. * Restored new Icons * Restored favicon * Remove fontawesome * Increase icon sizes * Update the zoom icon See https://github.com/lovasoa/whitebophir/pull/39#issuecomment-619524098 * set display inline block for tool names, otherwise firefox doesn't respect margin-bottom * Rework tool icons * fix color presets position Co-authored-by: finnboeger <finnboeger@users.noreply.github.com> Co-authored-by: Robert Beach <rdbeach@gmail.com> Co-authored-by: Finn Böger <finnboeger@googlemail.com>
2020-04-26 12:56:51 +00:00
<circle cx=4 cy=4 id="opacityIndicator" r=3.5 fill="url(#opacityPattern)" />
2019-06-19 10:09:06 +00:00
</svg>
</span>
<label class="tool-name slider" for="chooseOpacity">
2020-04-21 23:12:50 +00:00
<span>{{translations.opacity}}</span>
2019-06-27 13:46:39 +00:00
<input type="range" id="chooseOpacity" value="1" min="0.2" max="1" step="0.1"
class="rangeChooser" />
2019-06-19 10:09:06 +00:00
</label>
2019-06-27 13:46:39 +00:00
</li>
</ul>
</div>
</div>
2015-07-17 11:21:17 +00:00
2019-06-27 13:46:39 +00:00
<script type="application/json" id="translations">{{{json translations}}}</script>
<script src="js/path-data-polyfill.js"></script>
<script src="js/minitpl.js"></script>
<script src="js/board.js"></script>
<script src="tools/pencil/pencil.js"></script>
<script src="tools/line/line.js"></script>
<script src="tools/rect/rect.js"></script>
<script src="tools/text/text.js"></script>
<script src="tools/eraser/eraser.js"></script>
<script src="tools/hand/hand.js"></script>
<script src="tools/zoom/zoom.js"></script>
<script src="/js/canvascolor/canvascolor.min.js"></script>
</body>
2019-06-27 13:46:39 +00:00
</html>