apps/dotcom/client/index.html - main - githubmirror/tldraw

apps/dotcom/client/index.html
140 строк5 KB
Max Drake
fix(dotcom): prevent flash of white background in dark mode (#7842)
11 фев 2026, 13:41
11 фев 2026, 13:411ae3343
<!doctype html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="UTF-8" />
		<!-- theme init prevents dark mode flashbang on refresh, and prevents a portion of the flashbang during signin/signout -->
		<script src="/theme-init.js"></script>

		<link rel="manifest" href="/manifest.webmanifest" />
		<meta
			name="keywords"
			content="whiteboard, canvas, virtual online whiteboard, realtime collaboration, collaborative whiteboard, online drawing, team collaboration tool, free whiteboard app, free online whiteboard no sign up, classroom screen"
		/>
		<script type="application/ld+json">
			{
				"@context": "https://schema.org",
				"@type": "SoftwareApplication",
				"name": "tldraw",
				"url": "https://www.tldraw.com/",
				"applicationCategory": "BusinessApplication",
				"operatingSystem": "WEB",
				"description": "A free and instant collaborative whiteboarding tool. Free online whiteboard no sign up.",
				"audience": {
					"@type": "Audience",
					"audienceType": "business"
				},
				"creator": {
					"@type": "Organization",
					"name": "tldraw"
				}
			}
		</script>
		<script type="module">
			if (import.meta.env.MODE === 'development') {
				fetch('/api/app/replicator-status').then(console.log).catch(console.error)
			}
		</script>
		<style>
			#root {
				position: relative;
				inset: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			.visually-hidden {
				position: absolute !important;
				clip: rect(1px, 1px, 1px, 1px);
				height: 1px;
				width: 1px;
				overflow: hidden;
				white-space: nowrap;
				pointer-events: none;
				user-select: none;
				-webkit-user-select: none;
			}
		</style>
		<meta name="referrer" content="strict-origin-when-cross-origin" />
		<meta name="theme-color" content="#FFFFFF" data-rh="true" />
		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.svg" />
		<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.svg" />
		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.svg" />

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="default" />
		<meta name="apple-mobile-web-app-title" content="tldraw" />

		<meta name="application-name" content="tldraw" />
		<meta name="title" content="tldraw" />
		<meta
			name="description"
			content="A free and instant virtual whiteboarding with online collaboration. No signup required. Works on all devices: mobile, tablets, and desktop."
		/>
		<meta name="image" content="https://www.tldraw.com/social-twitter.png" />

		<meta name="format-detection" content="telephone=no" />
		<meta name="mobile-web-app-capable" content="yes" />
		<meta name="msapplication-config" content="browserconfig.xml" />
		<meta name="msapplication-TileColor" content="#FFFFFF" />
		<meta name="msapplication-tap-highlight" content="no" />

		<!-- $PRELOADED_FONTS -->

		<link
			rel="stylesheet"
			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
		/>

		<!-- $PRELOADED_SPRITES -->
		<link
			rel="preload"
			href="./src/assets/0_merged_tla.svg"
			as="image"
			type="image/svg+xml"
			crossorigin="anonymous"
		/>

		<meta name="twitter:card" content="summary" />
		<meta name="twitter:url" content="https://www.tldraw.com/" />
		<meta name="twitter:title" content="tldraw" />
		<meta
			name="twitter:description"
			content="A free and instant collaborative whiteboarding tool."
		/>
		<meta name="twitter:image" content="https://www.tldraw.com/social-twitter.png" />
		<meta name="twitter:image:alt" content="A collaborative whiteboarding tool interface" />
		<meta name="twitter:creator" content="@tldraw" />
		<meta property="og:type" content="website" />
		<meta property="og:title" content="tldraw" />
		<meta
			property="og:description"
			content="A free and instant collaborative whiteboarding tool."
		/>
		<meta property="og:site_name" content="tldraw" />
		<meta property="og:url" content="https://www.tldraw.com/" />
		<meta property="og:image" content="https://www.tldraw.com/social-og.png" />
		<meta property="og:image:alt" content="A collaborative whiteboarding tool interface" />

		<link
			rel="preload"
			href="../../../packages/assets/icons/icon/0_merged.svg"
			as="image"
			type="image/svg+xml"
		/>

		<title>tldraw • very good free whiteboard</title>
	</head>

	<body>
		<header>
			<h1 class="visually-hidden">tldraw - free and instant collaborative whiteboarding</h1>
		</header>
		<div id="root"></div>
		<script type="module" src="./src/main.tsx"></script>
		<noscript>You need to enable JavaScript to run tldraw. ✌️</noscript>
	</body>
</html>