f1a00f9e15Shadertoy server improvements: - Add ontoolinputpartial handler to show code preview during generation - Add IntersectionObserver to pause/play shader based on visibility - Apply host style variables (theme, colors, fonts) - Add border-radius with fullscreen mode support - Use gradient background and ghost text color for code preview Skill documentation updates: - Add streaming partial input section with use cases - Add visibility-based resource management pattern - Add fullscreen mode API and CSS patterns - Expand host styling with CSS variable usage examples
24 lines
969 B
HTML
24 lines
969 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="color-scheme" content="light dark">
|
|
<title>ShaderToy Renderer</title>
|
|
</head>
|
|
<body>
|
|
<main class="main">
|
|
<canvas id="canvas"></canvas>
|
|
<pre id="code-preview"></pre>
|
|
<button id="fullscreen-btn" class="fullscreen-btn" title="Toggle fullscreen">
|
|
<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
|
|
</svg>
|
|
<svg class="collapse-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
|
|
</svg>
|
|
</button>
|
|
</main>
|
|
<script type="module" src="/src/mcp-app.ts"></script>
|
|
</body>
|
|
</html>
|