2
0

index.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  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
  7. name="viewport"
  8. content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no"
  9. />
  10. <meta name="referrer" content="origin" />
  11. <meta name="mobile-web-app-capable" content="yes" />
  12. <meta name="theme-color" content="#121212" />
  13. <!-- Primary Meta Tags -->
  14. <meta
  15. name="title"
  16. content="Excalidraw — Collaborative whiteboarding made easy"
  17. />
  18. <meta
  19. name="description"
  20. content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
  21. />
  22. <meta name="image" content="https://excalidraw.com/og-image-3.png" />
  23. <!-- Open Graph / Facebook -->
  24. <meta property="og:site_name" content="Excalidraw" />
  25. <meta property="og:type" content="website" />
  26. <meta property="og:url" content="https://excalidraw.com" />
  27. <meta
  28. property="og:title"
  29. content="Excalidraw — Collaborative whiteboarding made easy"
  30. />
  31. <meta property="og:image:alt" content="Excalidraw logo" />
  32. <meta
  33. property="og:description"
  34. content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
  35. />
  36. <meta property="og:image" content="https://excalidraw.com/og-image-3.png" />
  37. <!-- Twitter -->
  38. <meta property="twitter:card" content="summary_large_image" />
  39. <meta property="twitter:site" content="@excalidraw" />
  40. <meta property="twitter:url" content="https://excalidraw.com" />
  41. <meta
  42. property="twitter:title"
  43. content="Excalidraw — Collaborative whiteboarding made easy"
  44. />
  45. <meta
  46. property="twitter:description"
  47. content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
  48. />
  49. <meta
  50. property="twitter:image"
  51. content="https://excalidraw.com/og-image-3.png"
  52. />
  53. <link rel="canonical" href="https://excalidraw.com" />
  54. <!------------------------------------------------------------------------->
  55. <!-- to minimize white flash on load when user has dark mode enabled -->
  56. <script>
  57. try {
  58. function setTheme(theme) {
  59. if (theme === "dark") {
  60. document.documentElement.classList.add("dark");
  61. } else {
  62. document.documentElement.classList.remove("dark");
  63. }
  64. }
  65. function getTheme() {
  66. const theme = window.localStorage.getItem("excalidraw-theme");
  67. if (theme && theme === "system") {
  68. return window.matchMedia("(prefers-color-scheme: dark)").matches
  69. ? "dark"
  70. : "light";
  71. } else {
  72. return theme || "light";
  73. }
  74. }
  75. setTheme(getTheme());
  76. } catch (e) {
  77. console.error("Error setting dark mode", e);
  78. }
  79. </script>
  80. <style>
  81. html.dark {
  82. background-color: #121212;
  83. color: #fff;
  84. }
  85. </style>
  86. <!-- Warmup the connection for Google fonts -->
  87. <link rel="preconnect" href="https://fonts.googleapis.com" />
  88. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  89. <!------------------------------------------------------------------------->
  90. <% if (typeof PROD != 'undefined' && PROD == true) { %>
  91. <script>
  92. // Redirect Excalidraw+ users which have auto-redirect enabled.
  93. //
  94. // Redirect only the bare root path, so link/room/library urls are not
  95. // redirected.
  96. //
  97. // Putting into index.html for best performance (can't redirect on server
  98. // due to location.hash checks).
  99. if (
  100. window.location.pathname === "/" &&
  101. !window.location.hash &&
  102. !window.location.search &&
  103. // if its present redirect
  104. document.cookie.includes("excplus-autoredirect=true")
  105. ) {
  106. window.location.href = "https://app.excalidraw.com";
  107. }
  108. </script>
  109. <!-- Following placeholder is replaced during the build step -->
  110. <!-- PLACEHOLDER:EXCALIDRAW_APP_FONTS -->
  111. <!-- Register Assistant as the UI font, before the scene inits -->
  112. <link
  113. rel="stylesheet"
  114. href="../packages/excalidraw/fonts/fonts.css"
  115. type="text/css"
  116. />
  117. <% } else { %>
  118. <script>
  119. window.EXCALIDRAW_ASSET_PATH = window.origin;
  120. </script>
  121. <% } %>
  122. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  123. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  124. <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  125. <!-- Excalidraw version -->
  126. <meta name="version" content="{version}" />
  127. <% if (typeof VITE_APP_DEV_DISABLE_LIVE_RELOAD != 'undefined' &&
  128. VITE_APP_DEV_DISABLE_LIVE_RELOAD == true) { %>
  129. <script>
  130. {
  131. const _WebSocket = window.WebSocket;
  132. window.WebSocket = function (url) {
  133. if (/ws:\/\/localhost:.+?\/sockjs-node/.test(url)) {
  134. console.info(
  135. "[!!!] Live reload is disabled via VITE_APP_DEV_DISABLE_LIVE_RELOAD [!!!]",
  136. );
  137. } else {
  138. return new _WebSocket(url);
  139. }
  140. };
  141. }
  142. </script>
  143. <% } %>
  144. <script>
  145. // setting this so that libraries installation reuses this window tab.
  146. window.name = "_excalidraw";
  147. </script>
  148. <!-- FIXME: remove this when we update CRA (fix SW caching) -->
  149. <style>
  150. body,
  151. html {
  152. margin: 0;
  153. -webkit-text-size-adjust: 100%;
  154. width: 100%;
  155. height: 100%;
  156. overflow: hidden;
  157. }
  158. .visually-hidden {
  159. position: absolute !important;
  160. height: 1px;
  161. width: 1px;
  162. overflow: hidden;
  163. clip: rect(1px, 1px, 1px, 1px);
  164. white-space: nowrap;
  165. user-select: none;
  166. }
  167. #root {
  168. height: 100%;
  169. -webkit-touch-callout: none;
  170. -webkit-user-select: none;
  171. -khtml-user-select: none;
  172. -moz-user-select: none;
  173. -ms-user-select: none;
  174. user-select: none;
  175. }
  176. @media screen and (min-width: 1200px) {
  177. #root {
  178. -webkit-touch-callout: default;
  179. -webkit-user-select: auto;
  180. -khtml-user-select: auto;
  181. -moz-user-select: auto;
  182. -ms-user-select: auto;
  183. user-select: auto;
  184. }
  185. }
  186. </style>
  187. </head>
  188. <body>
  189. <noscript> You need to enable JavaScript to run this app. </noscript>
  190. <header>
  191. <h1 class="visually-hidden">Excalidraw</h1>
  192. </header>
  193. <div id="root"></div>
  194. <script type="module" src="index.tsx"></script>
  195. <% if (typeof PROD != 'undefined' && PROD == true) { %>
  196. <!-- 100% privacy friendly analytics -->
  197. <script>
  198. // need to load this script dynamically bcs. of iframe embed tracking
  199. var scriptEle = document.createElement("script");
  200. scriptEle.setAttribute(
  201. "src",
  202. "https://scripts.simpleanalyticscdn.com/latest.js",
  203. );
  204. scriptEle.setAttribute("type", "text/javascript");
  205. scriptEle.setAttribute("defer", true);
  206. scriptEle.setAttribute("async", true);
  207. // if iframe
  208. if (window.self !== window.top) {
  209. scriptEle.setAttribute("data-auto-collect", true);
  210. }
  211. document.body.appendChild(scriptEle);
  212. // if iframe
  213. if (window.self !== window.top) {
  214. scriptEle.addEventListener("load", () => {
  215. if (window.sa_pageview) {
  216. window.window.sa_event(action, {
  217. category: "iframe",
  218. label: "embed",
  219. value: window.location.pathname,
  220. });
  221. }
  222. });
  223. }
  224. </script>
  225. <!-- end LEGACY GOOGLE ANALYTICS -->
  226. <% } %>
  227. </body>
  228. </html>