選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

board.html 4.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html>
  2. <html lang="{{language}}">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta class="board wbo_dev a1 a3 a9 za" />
  6. <title>{{board}} | WBO | {{translations.collaborative_whiteboard}}</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1" />
  8. <link rel="stylesheet" type="text/css" href="../board.css" />
  9. <script src="../socket.io/socket.io.js"></script>
  10. <meta name="description" content="{{translations.tagline}}" />
  11. <meta name="keywords"
  12. content="{{translations.collaborative_whiteboard}},online,draw,paint,shared,realtime,wbo,whitebophir" />
  13. <link rel="apple-touch-icon" href="../favicon.svg">
  14. <link rel="icon" type="image/x-icon" sizes="16x16" href="../favicon.ico">
  15. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
  16. <meta property="og:title" content="{{board}} board on WBO" />
  17. <meta property="og:url" content="{{baseUrl}}/boards/{{boardUriComponent}}" />
  18. <meta property="og:image" content="{{baseUrl}}/preview/{{boardUriComponent}}" />
  19. <link rel="canonical" href="{{boardUriComponent}}?lang={{language}}" />
  20. {{#languages}}
  21. <link rel="alternate" hreflang="{{.}}" href="{{../boardUriComponent}}?lang={{.}}" />
  22. {{/languages}}
  23. <script src="../polyfill.min.js"></script>
  24. </head>
  25. <body>
  26. <div id="board">
  27. <svg id="canvas" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
  28. <defs id="defs"></defs>
  29. <g id="drawingArea"></g>
  30. <g id="cursors"></g>
  31. </svg>
  32. </div>
  33. <div id="loadingMessage">{{translations.loading}}</div>
  34. <div id="menu" tabindex="0" {{#hideMenu}}style="display:none;"{{/hideMenu}}>
  35. <div id="menuItems">
  36. <ul id="tools" class="tools">
  37. <li class="tool" tabindex="-1">
  38. <img class="tool-icon" width="35" height="35" src="" alt="icon" />
  39. <span class="tool-name"></span>
  40. <img class="tool-icon secondaryIcon" width="35" height="35" src="data:," alt="icon" />
  41. </li>
  42. </ul>
  43. <ul class="tools" id="settings">
  44. <li class="tool" tabindex="-1">
  45. <input class="tool-icon" type="color" id="chooseColor" value="#1913B0" />
  46. <label class="tool-name" for="chooseColor">{{translations.color}}</label>
  47. <span class="colorPresets" id="colorPresetSel">
  48. <span class="colorPresetButton"></span>
  49. </span>
  50. </li>
  51. <li class="tool" tabindex="-1"
  52. title="{{translations.size}} ({{translations.keyboard_shortcut}}: alt + {{translations.mousewheel}})">
  53. <img class="tool-icon" width="60" height="60" src="icon-size.svg" alt="size" />
  54. <label class="tool-name slider" for="chooseSize">
  55. <span>{{translations.size}}</span>
  56. <input type="range" id="chooseSize" value="4" min="1" max="50" step="1" class="rangeChooser" />
  57. </label>
  58. </li>
  59. <li class="tool" tabindex="-1">
  60. <span class="tool-icon">
  61. <svg viewBox="0 0 8 8">
  62. <pattern id="opacityPattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
  63. <rect x=0 y=0 width=2 height=2 fill=black></rect>
  64. <rect x=2 y=2 width=2 height=2 fill=black></rect>
  65. <rect x=2 y=0 width=2 height=2 fill=#eeeeee></rect>
  66. <rect x=0 y=2 width=2 height=2 fill=#eeeeee></rect>
  67. </pattern>
  68. <circle cx=4 cy=4 id="opacityIndicator" r=3.5 fill="url(#opacityPattern)"></circle>
  69. </svg>
  70. </span>
  71. <label class="tool-name slider" for="chooseOpacity">
  72. <span>{{translations.opacity}}</span>
  73. <input type="range" id="chooseOpacity" value="1" min="0.2" max="1" step="0.1"
  74. class="rangeChooser" />
  75. </label>
  76. </li>
  77. </ul>
  78. </div>
  79. </div>
  80. <script type="application/json" id="translations">{{{ json translations }}}</script>
  81. <script type="application/json" id="configuration">{{{ json configuration }}}</script>
  82. <script src="../js/path-data-polyfill.js"></script>
  83. <script src="../js/minitpl.js"></script>
  84. <script src="../js/intersect.js"></script>
  85. <script src="../js/board.js"></script>
  86. <script src="../tools/pencil/wbo_pencil_point.js"></script>
  87. <script src="../tools/pencil/pencil.js"></script>
  88. <script src="../tools/cursor/cursor.js"></script>
  89. <script src="../tools/line/line.js"></script>
  90. <script src="../tools/rect/rect.js"></script>
  91. <script src="../tools/ellipse/ellipse.js"></script>
  92. <script src="../tools/text/text.js"></script>
  93. <script src="../tools/eraser/eraser.js"></script>
  94. <script src="../tools/hand/hand.js"></script>
  95. <script src="../tools/grid/grid.js"></script>
  96. <script src="../tools/download/download.js"></script>
  97. <script src="../tools/zoom/zoom.js"></script>
  98. <script src="../js/canvascolor.js"></script>
  99. </body>
  100. </html>