You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 2.6KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!DOCTYPE html>
  2. <html lang="{{language}}">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>WBO — {{translations.collaborative_whiteboard}}</title>
  6. <link rel="stylesheet" href="index.css" />
  7. <meta name="description" content="{{translations.tagline}}" />
  8. <meta name="keywords"
  9. content="whiteboard,collaborative,online,draw,paint,shared,realtime,wbo,whitebophir,open-source,GPL,javascript" />
  10. <link rel="icon" type="image/x-icon" sizes="16x16" href="favicon.ico">
  11. <link rel="apple-touch-icon" href="favicon.svg">
  12. <link rel="mask-icon" href="favicon.svg" color="black">
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14. <meta property="og:url" content="https://wbo.ophir.dev">
  15. <meta property="og:image" content="{{baseUrl}}/favicon.svg">
  16. <link rel="canonical" href="?lang={{language}}" />
  17. {{#languages}}
  18. <link rel="alternate" hreflang="{{.}}" href="?lang={{.}}" />{{/languages}}
  19. <link rel="manifest" href="manifest.json">
  20. <meta name="theme-color" content="#C4DFFF" />
  21. </head>
  22. <body>
  23. <header>
  24. <h1>WBO</h1>
  25. <nav class="lang-selector">
  26. <span>{{language}}</span>
  27. <ul>
  28. {{#languages}}
  29. <li><a href="?lang={{.}}" hreflang="{{.}}" rel="alternate">{{.}}</a></li>
  30. {{/languages}}
  31. </ul>
  32. </nav>
  33. </header>
  34. <main>
  35. <div id="description">
  36. <h3>{{translations.index_title}}</h3>
  37. <p>{{{translations.introduction_paragraph}}}</p>
  38. <p>{{{translations.share_instructions}}}</p>
  39. </div>
  40. <div>
  41. <p>{{{translations.public_board_description}}}</p>
  42. <a href="boards/anonymous" class="wbo-button">{{{translations.open_public_board}}}</a>
  43. </div>
  44. <div>
  45. <p>{{{translations.private_board_description}}}</p>
  46. <a href="random" class="wbo-button">{{{translations.create_private_board}}}</a>
  47. </div>
  48. <div>
  49. <p><label for="board">{{{translations.named_private_board_description}}}</label></p>
  50. <form action="boards" method="GET">
  51. <input type="text" id="board" name="board" required placeholder="{{{translations.board_name_placeholder}}}" />
  52. <input type="submit" value="Go">
  53. </form>
  54. </div>
  55. <div id="recent-boards" class="hidden">
  56. <h3>{{{translations.recent_boards}}}</h3>
  57. </div>
  58. </main>
  59. <footer>
  60. <a href="https://www.instagram.com/wbo_whiteboard/" class="smallink" rel="external" title="Instagram"><img
  61. alt="instagram" src="instagram.svg" width="30" height="30" /></a>
  62. <a href="https://github.com/lovasoa/whitebophir" class="smallink" rel="external"
  63. title="{{translations.view_source}}"><img alt="github" src="github.svg" width="30" height="30" />
  64. </a>
  65. </footer>
  66. </body>
  67. <script src="../js/index.js" async defer></script>
  68. </html>