index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>ComfyUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<!-- Browser Test Fonts -->
		<!-- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
		<style>
			* {
				font-family: 'Roboto Mono', 'Noto Color Emoji';
			}
		</style> -->
		<script type="module">
			console.log("ComfyUI Front-end version:", __COMFYUI_FRONTEND_VERSION__);
			import { app } from "./src/scripts/app";
			(async () => {
				await app.setup();
				window.app = app;
				window.graph = app.graph;
			})();
		</script>
		<link rel="stylesheet" type="text/css" href="/user.css" />
		<link rel="stylesheet" type="text/css" href="/materialdesignicons.min.css" />
	</head>
	<body class="litegraph">
		<div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">
			<main class="comfy-user-selection-inner">
				<h1>ComfyUI</h1>
				<form>
					<section>
						<label>New user:
							<input placeholder="Enter a username" />
						</label>
					</section>
					<div class="comfy-user-existing">
						<span class="or-separator">OR</span>
						<section>
							<label>
								Existing user:
								<select>
									<option hidden disabled selected value> Select a user </option>
								</select>
							</label>
						</section>
					</div>
					<footer>
						<span class="comfy-user-error">&nbsp;</span>
						<button class="comfy-btn comfy-user-button-next">Next</button>
					</footer>
				</form>
			</main>
		</div>
	</body>
</html>