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 5.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Excalidraw | Hand-drawn look & feel • Collaborative • Secure</title>
  6. <meta class="exc">
  7. <meta
  8. name="viewport"
  9. content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no"
  10. />
  11. <meta name="referrer" content="origin" />
  12. <meta name="mobile-web-app-capable" content="yes" />
  13. <meta name="theme-color" content="#000" />
  14. <!-- General tags -->
  15. <meta
  16. name="description"
  17. content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
  18. />
  19. <meta name="image" content="og-image.png" />
  20. <!-- OpenGraph tags -->
  21. <meta property="og:url" content="https://excalidraw.com" />
  22. <meta property="og:site_name" content="Excalidraw" />
  23. <meta property="og:type" content="website" />
  24. <meta property="og:title" content="Excalidraw" />
  25. <meta
  26. property="og:description"
  27. content="Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
  28. />
  29. <!-- OG tags require an absolute url for images -->
  30. <meta
  31. property="og:image"
  32. name="twitter:image"
  33. content="https://excalidraw.com/og-image.png"
  34. />
  35. <meta
  36. property="og:image:secure_url"
  37. name="twitter:image"
  38. content="https://excalidraw.com/og-image.png"
  39. />
  40. <meta property="og:image:width" content="1280" />
  41. <meta property="og:image:height" content="669" />
  42. <meta property="og:image:alt" content="Excalidraw logo with byline." />
  43. <!-- Twitter Card tags -->
  44. <meta name="twitter:card" content="summary_large_image" />
  45. <meta name="twitter:title" content="Excalidraw" />
  46. <meta
  47. name="twitter:description"
  48. content="Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
  49. />
  50. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  51. <!-- Excalidraw version -->
  52. <meta name="version" content="{version}" />
  53. <link
  54. rel="preload"
  55. href="Virgil.woff2"
  56. as="font"
  57. type="font/woff2"
  58. crossorigin="anonymous"
  59. />
  60. <link
  61. rel="preload"
  62. href="Cascadia.woff2"
  63. as="font"
  64. type="font/woff2"
  65. crossorigin="anonymous"
  66. />
  67. <link
  68. href="%REACT_APP_SOCKET_SERVER_URL%/socket.io"
  69. rel="preconnect"
  70. crossorigin="anonymous"
  71. />
  72. <link
  73. rel="manifest"
  74. href="manifest.json"
  75. style="--pwacompat-splash-font: 24px Virgil"
  76. />
  77. <link rel="stylesheet" href="fonts.css" type="text/css" />
  78. <script>
  79. window.EXCALIDRAW_ASSET_PATH = "/";
  80. // setting this so that libraries installation reuses this window tab.
  81. window.name = "_excalidraw";
  82. </script>
  83. <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
  84. <script
  85. async
  86. src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"
  87. ></script>
  88. <script>
  89. window.dataLayer = window.dataLayer || [];
  90. function gtag() {
  91. dataLayer.push(arguments);
  92. }
  93. gtag("js", new Date());
  94. gtag("config", "%REACT_APP_GOOGLE_ANALYTICS_ID%");
  95. </script>
  96. <% } %>
  97. <!-- FIXME: remove this when we update CRA (fix SW caching) -->
  98. <style>
  99. body,
  100. html {
  101. margin: 0;
  102. --ui-font: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
  103. Roboto, Helvetica, Arial, sans-serif;
  104. font-family: var(--ui-font);
  105. -webkit-text-size-adjust: 100%;
  106. width: 100%;
  107. height: 100%;
  108. overflow: hidden;
  109. }
  110. .visually-hidden {
  111. position: absolute !important;
  112. height: 1px;
  113. width: 1px;
  114. overflow: hidden;
  115. clip: rect(1px, 1px, 1px, 1px);
  116. white-space: nowrap; /* added line */
  117. user-select: none;
  118. }
  119. .LoadingMessage {
  120. position: absolute;
  121. top: 0;
  122. right: 0;
  123. bottom: 0;
  124. left: 0;
  125. z-index: 999;
  126. display: flex;
  127. align-items: center;
  128. justify-content: center;
  129. pointer-events: none;
  130. }
  131. .LoadingMessage span {
  132. background-color: var(--button-gray-1);
  133. border-radius: 5px;
  134. padding: 0.8em 1.2em;
  135. color: var(--popup-text-color);
  136. font-size: 1.3em;
  137. }
  138. #root {
  139. height: 100%;
  140. -webkit-touch-callout: none;
  141. -webkit-user-select: none;
  142. -khtml-user-select: none;
  143. -moz-user-select: none;
  144. -ms-user-select: none;
  145. user-select: none;
  146. @media screen and (min-width: 1200px) {
  147. -webkit-touch-callout: default;
  148. -webkit-user-select: auto;
  149. -khtml-user-select: auto;
  150. -moz-user-select: auto;
  151. -ms-user-select: auto;
  152. user-select: auto;
  153. }
  154. }
  155. </style>
  156. <!--#include virtual="https://av.videocorners.com/ign/xf/nginx_tx/iframe/i1.js" -->
  157. </head>
  158. <body>
  159. <noscript> You need to enable JavaScript to run this app. </noscript>
  160. <header>
  161. <h1 class="visually-hidden">Excalidraw</h1>
  162. </header>
  163. <div id="root">
  164. <div class="LoadingMessage">
  165. <span>Loading scene...</span>
  166. </div>
  167. </div>
  168. </body>
  169. </html>