studio.html
Rama main · réplica de lectura del repositorio original.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Build a Comic Chat strip panel by panel: pick the cast, poses, gestures, balloons, background, and camera, then export PNG or JSON."
/>
<title>Comic Chat Studio - Build a strip panel by panel</title>
<!--if:SITE_ORIGIN-->
<link rel="canonical" href="%SITE_ORIGIN%/studio" />
<!--/if-->
<meta name="robots" content="index, follow" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Comic Chat Studio" />
<meta
property="og:description"
content="Build a Comic Chat strip panel by panel: pick the cast, poses, gestures, balloons, background, and camera, then export PNG or JSON."
/>
<!--if:SITE_ORIGIN-->
<meta property="og:url" content="%SITE_ORIGIN%/studio" />
<meta property="og:image" content="%SITE_ORIGIN%/og-studio.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
property="og:image:alt"
content="The Comic Chat Studio editor showing a five-panel strip above its script rows"
/>
<meta name="twitter:card" content="summary_large_image" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Comic Chat Studio",
"url": "%SITE_ORIGIN%/studio",
"description": "Build a Comic Chat strip panel by panel: pick the cast, poses, gestures, balloons, background, and camera, then export PNG or JSON.",
"applicationCategory": "DesignApplication",
"operatingSystem": "Any",
"image": "%SITE_ORIGIN%/og-studio.jpg"
}
</script>
<!--/if-->
<link rel="stylesheet" href="/src/studio/studio.css" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>
<body class="studio">
<header class="titlebar">
<h1 class="titlebar-title">Comic Chat Studio</h1>
<span id="studio-status" class="titlebar-status" role="status"></span>
<span class="titlebar-actions">
<a
class="titlebar-button"
href="/agent-skill.html"
aria-label="Agent skill: build a strip with an AI agent"
title="Agent skill: build a strip with an AI agent"
>
<img
class="titlebar-icon"
src="/assets/help-icon.png?v=2"
alt=""
width="139"
height="128"
/>
</a>
<!--if:SUPPORT_URL-->
<a
class="titlebar-button"
href="%SUPPORT_URL%"
target="_blank"
rel="noreferrer"
aria-label="Buy me a coffee"
title="Buy me a coffee"
>
<svg
viewBox="0 0 16 16"
width="18"
height="18"
fill="none"
stroke="currentColor"
stroke-width="1.4"
stroke-linejoin="round"
stroke-linecap="round"
aria-hidden="true"
>
<path
d="M5.6 2.2c0-.9 1.1-.9 1.1-1.8M9.3 2.2c0-.9 1.1-.9 1.1-1.8"
stroke-width="1.1"
/>
<rect x="2.6" y="4.2" width="10.8" height="2.1" rx="1.05" />
<path
d="M4 8.3h8l-0.85 5.5a1.4 1.4 0 0 1-1.39 1.2H6.24a1.4 1.4 0 0 1-1.39-1.2L4 8.3Z"
/>
</svg>
</a>
<!--/if-->
<a
class="titlebar-button"
href="https://github.com/remsky/comic-chat-web"
target="_blank"
rel="noreferrer"
aria-label="View source on GitHub"
title="View source on GitHub"
>
<svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true">
<path
fill="currentColor"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"
/>
</svg>
</a>
<a class="titlebar-button" href="/" title="Back to the live rooms">
Chat
</a>
</span>
</header>
<main id="studio-app" class="app">
<section class="strip" aria-label="Strip preview">
<div class="strip-bar">
<span id="studio-count" class="strip-count"></span>
<input
id="studio-columns"
class="strip-columns"
type="number"
min="1"
max="8"
step="1"
value="4"
aria-label="Panels per row"
title="Panels per row, on the sheet and here"
/>
<input
id="studio-cardsize"
class="strip-size"
type="range"
min="60"
max="900"
step="10"
value="230"
aria-label="Zoom"
title="Zoom, also Ctrl+scroll or pinch on the strip"
/>
</div>
<div id="studio-stage" class="strip-scroll">
<div id="studio-panels" class="strip-page"></div>
</div>
</section>
<div
id="studio-divider"
class="split-divider"
aria-hidden="true"
title="Drag to resize, double-click to reset"
></div>
<aside id="studio-inspector" class="inspector" aria-label="Constructor">
<div class="editor-bar">
<button id="studio-new" class="sbutton" type="button">New</button>
<label class="sbutton" for="studio-import">
Import
<input id="studio-import" type="file" accept="application/json" hidden />
</label>
<details id="studio-save" class="smenu">
<summary class="sbutton">Save</summary>
<ul class="smenu-pop">
<li>
<!-- the build stamps the deploy origin the export credit names -->
<button
id="studio-export-png"
class="smenu-item"
type="button"
data-site="%SITE_ORIGIN%"
>
PNG sheet
</button>
</li>
<li>
<button id="studio-export-png-square" class="smenu-item" type="button">
PNG square
</button>
</li>
<li>
<button id="studio-export-mp4" class="smenu-item" type="button">
MP4 video
</button>
</li>
<li>
<button id="studio-export-gif" class="smenu-item" type="button">
GIF animation
</button>
</li>
<li>
<button id="studio-export-json" class="smenu-item" type="button">
JSON script
</button>
</li>
</ul>
</details>
<select
id="studio-size"
class="editor-bar-end"
aria-label="Panel size"
title="Panel size"
>
<option value="modern">Modern</option>
<option value="classic">Classic</option>
</select>
<input
id="studio-seed"
class="editor-bar-seed"
type="number"
step="1"
placeholder="Seed"
aria-label="Layout seed"
title="Layout seed"
/>
</div>
<ul id="studio-issues" class="sissues" hidden></ul>
<div id="studio-editor" class="editor"></div>
<details class="drawer">
<summary>JSON</summary>
<div class="drawer-body drawer-body--stack">
<textarea
id="studio-json"
class="jsonpane-text"
spellcheck="false"
aria-label="Strip JSON"
></textarea>
<button id="studio-apply-json" class="sbutton" type="button">
Apply JSON
</button>
</div>
</details>
</aside>
</main>
<footer class="legal-footer">
<a href="/legal.html#terms">Terms</a>
<span aria-hidden="true">·</span>
<a href="/legal.html#privacy">Privacy</a>
</footer>
<script type="module" src="/src/studio/studio.ts"></script>
</body>
</html>