Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

board.html 3.7KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!DOCTYPE html>
  2. <html lang="{{language}}">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>{{board}} | WBO | {{translate translations 'Collaborative whiteboard'}}</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1" />
  7. <link rel="stylesheet" type="text/css" href="board.css" />
  8. <script src="/socket.io/socket.io.js"></script>
  9. <meta name="description"
  10. content="{{translate translations 'A free and opensource online collaborative drawing tool. Sketch new ideas together on WBO !'}}'" />
  11. <meta name="keywords"
  12. content="{{translate translations 'Collaborative whiteboard'}},online,draw,paint,shared,realtime,wbo,whitebophir" />
  13. <link rel="apple-touch-icon" href="/favicon.svg">
  14. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
  15. <meta property="og:title" content="{{board}} board on WBO" />
  16. <meta property="og:url" content="{{baseUrl}}/boards/{{boardUriComponent}}" />
  17. <meta property="og:image" content="{{baseUrl}}/preview/{{boardUriComponent}}" />
  18. <link rel="canonical" href="{{baseUrl}}/boards/{{boardUriComponent}}?lang={{language}}" />
  19. {{#languages}}
  20. <link rel="alternate" hreflang="{{.}}" href="{{../baseUrl}}/boards/{{../boardUriComponent}}?lang={{.}}" />
  21. {{/languages}}
  22. </head>
  23. <body>
  24. <div id="board">
  25. <svg id="canvas" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
  26. <defs id="defs"></defs>
  27. </svg>
  28. </div>
  29. <div id="loadingMessage">{{translate translations 'Loading'}}</div>
  30. <div id="menu">
  31. <div id="menuItems">
  32. <ul id="tools" class="tools">
  33. <li class="tool"><span class="tool-icon"></span><span class="tool-name"></span></li>
  34. </ul>
  35. <ul class="tools" id="settings">
  36. <li class="tool">
  37. <span class="tool-icon">
  38. <input type="color" id="chooseColor" value="#1913B0" />
  39. </span>
  40. <label class="tool-name" for="chooseColor">{{translate translations 'Color'}}</label>
  41. </li>
  42. <li class="tool">
  43. <span class="tool-icon">
  44. <svg viewBox="-60 -60 120 120">
  45. <circle id="sizeIndicator" cx=0 cy=0 r=10 /></svg>
  46. </span>
  47. <label class="tool-name slider" for="chooseSize">
  48. <span>{{translate translations 'Size'}}</span>
  49. <input type="range" id="chooseSize" value="10" min="1" max="50" step="1" class="rangeChooser" />
  50. </label>
  51. </li>
  52. <li class="tool">
  53. <span class="tool-icon">
  54. <svg viewBox="0 0 12 12">
  55. <pattern id="opacityPattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
  56. <rect x=0 y=0 width=2 height=2 fill=black />
  57. <rect x=2 y=2 width=2 height=2 fill=black />
  58. <rect x=2 y=0 width=2 height=2 fill=white />
  59. <rect x=0 y=2 width=2 height=2 fill=white />
  60. </pattern>
  61. <rect id="opacityIndicator" rx=1 width="100%" height="100%" fill="url(#opacityPattern)" />
  62. </svg>
  63. </span>
  64. <label class="tool-name slider" for="chooseOpacity">
  65. <span>{{translate translations 'Opacity'}}</span>
  66. <input type="range" id="chooseOpacity" value="1" min="0.2" max="1" step="0.1"
  67. class="rangeChooser" />
  68. </label>
  69. </li>
  70. </ul>
  71. </div>
  72. </div>
  73. <script type="application/json" id="translations">{{{json translations}}}</script>
  74. <script src="js/path-data-polyfill.js"></script>
  75. <script src="js/minitpl.js"></script>
  76. <script src="js/board.js"></script>
  77. <script src="tools/pencil/pencil.js"></script>
  78. <script src="tools/line/line.js"></script>
  79. <script src="tools/rect/rect.js"></script>
  80. <script src="tools/text/text.js"></script>
  81. <script src="tools/eraser/eraser.js"></script>
  82. <script src="tools/hand/hand.js"></script>
  83. <script src="tools/zoom/zoom.js"></script>
  84. <script src="/js/canvascolor/canvascolor.min.js"></script>
  85. </body>
  86. </html>