mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
93b7b7305a
Backport of #9849 to cloud/1.41 Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: Amp <amp@ampcode.com>
114 lines
3.0 KiB
HTML
114 lines
3.0 KiB
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"
|
|
/>
|
|
<link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
|
|
|
|
<!-- Fullscreen mode on mobile browsers -->
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<!-- Status bar style (eg. black or transparent) -->
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
<style>
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
/* Setting it early for background during load */
|
|
--bg-color: #202020;
|
|
--fg-color: #ffffff;
|
|
}
|
|
}
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
body {
|
|
display: grid;
|
|
background-color: var(--bg-color);
|
|
background-image: var(--bg-img);
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
</style>
|
|
<style>
|
|
/* Pre-Vue splash loader — inlined to avoid SPA fallback serving
|
|
index.html instead of CSS on cloud/ephemeral environments */
|
|
#splash-loader {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
contain: strict;
|
|
}
|
|
#splash-loader svg {
|
|
width: min(200px, 50vw);
|
|
height: auto;
|
|
transform: translateZ(0);
|
|
}
|
|
#splash-loader .wave-group {
|
|
animation: splash-rise 4s ease-in-out infinite alternate;
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
}
|
|
#splash-loader .wave-path {
|
|
animation: splash-wave 1.2s linear infinite;
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
}
|
|
@keyframes splash-rise {
|
|
from {
|
|
transform: translateY(280px);
|
|
}
|
|
to {
|
|
transform: translateY(-80px);
|
|
}
|
|
}
|
|
@keyframes splash-wave {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-880px);
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#splash-loader .wave-group,
|
|
#splash-loader .wave-path {
|
|
animation: none;
|
|
}
|
|
#splash-loader .wave-group {
|
|
transform: translateY(-80px);
|
|
}
|
|
}
|
|
</style>
|
|
<link rel="manifest" href="manifest.json" />
|
|
</head>
|
|
|
|
<body class="litegraph grid">
|
|
<div id="vue-app">
|
|
<span class="visually-hidden" role="status">Loading ComfyUI...</span>
|
|
</div>
|
|
<script type="module" src="src/main.ts"></script>
|
|
</body>
|
|
</html>
|