409 lines
15 KiB
HTML
409 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AF - Enhanced HTML Note - Default Content</title>
|
||
|
||
<link rel="stylesheet" href="./styles.css">
|
||
|
||
|
||
</head>
|
||
<body style="background-color: #2a2a2a;">
|
||
|
||
<div class="af-html-note-container">
|
||
<div class="af-html-note-content">
|
||
<!-- THIS CONTENT TO JS FILE -->
|
||
|
||
<h1>Predefined Section Colors</h1>
|
||
<h2>Positive Prompt Section</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-section af-positive">
|
||
<h2>🟢 Positive Prompts</h2>
|
||
<p><strong>masterpiece, best quality, highly detailed</strong></p>
|
||
<ul>
|
||
<li>Professional lighting</li>
|
||
<li>Sharp focus</li>
|
||
<li>8K resolution</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Negative Prompt Section</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-section af-negative">
|
||
<h2>🔴 Negative Prompts</h2>
|
||
<p><em>low quality, blurry, distorted</em></p>
|
||
<p><code>nsfw, watermark, signature, bad anatomy</code></p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Neutral Prompt Section</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-section af-neutral">
|
||
<h3>📝 Notes</h3>
|
||
<p>General notes and information...</p>
|
||
<ul>
|
||
<li>Item 1</li>
|
||
<li>Item 2</li>
|
||
<li>Item 3</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Info Section</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-section af-info">
|
||
<h3>ℹ️ Information</h3>
|
||
<p>Using: <strong>SDXL 1.0</strong></p>
|
||
<p>Steps: <code>25</code> | CFG: <code>7.5</code> | Sampler: <code>DPM++ 2M Karras</code></p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Warning Section</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-section af-warning">
|
||
<h3>⚠️ Warning</h3>
|
||
<p>This workflow requires:</p>
|
||
<ol>
|
||
<li>High VRAM (8GB+)</li>
|
||
<li>Latest ComfyUI version</li>
|
||
<li>SDXL compatible models</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Yellow Section</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-section af-yellow">
|
||
<h3>💛 Yellow Section</h3>
|
||
<p>Alternative yellow styled content with different shade...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Blue Section</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-section af-blue">
|
||
<h3>🔵 Blue Section</h3>
|
||
<p>Deep blue styled content for technical information...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Custom Section</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-section af-custom">
|
||
<h3>🎨 Custom</h3>
|
||
<p>Purple custom styled content for special cases...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h1>Predefined Spacers</h1>
|
||
<h2>Top spacer (2px)</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-spacer-top"></div>
|
||
|
||
<div class="af-section af-negative">Content Block 1</div>
|
||
</div>
|
||
|
||
<h2>Mini spacer (4px)</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-spacer-mini"></div>
|
||
|
||
<div class="af-section af-neutral">Content Block 2</div>
|
||
</div>
|
||
|
||
<h2>Small spacer (8px)</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-spacer-small"></div>
|
||
|
||
<div class="af-section af-info">Content Block 3</div>
|
||
</div>
|
||
|
||
<h2>Regular spacer (16px)</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-spacer"></div>
|
||
|
||
<div class="af-section af-warning">Content Block 4</div>
|
||
</div>
|
||
|
||
<h2>Large spacer (32px)</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-spacer-large"></div>
|
||
|
||
<div class="af-section af-custom">Content Block 5</div>
|
||
</div>
|
||
|
||
<h2>Extra large spacer (48px)</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-spacer-xl"></div>
|
||
|
||
<div class="af-section af-blue">Content Block 6</div>
|
||
</div>
|
||
|
||
<h2>Column Layouts</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="row">
|
||
<div class="af-column-half-left">
|
||
<div class="af-section af-positive">
|
||
<h3>🎨 Style Settings</h3>
|
||
<ul>
|
||
<li>Style: Photorealistic</li>
|
||
<li>Aspect: 16:9</li>
|
||
<li>Quality: Ultra High</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="af-spacer"></div>
|
||
|
||
<div class="af-section af-info">
|
||
<h3>⚙️ Technical</h3>
|
||
<p>Resolution: <code>1920x1080</code></p>
|
||
<p>Batch: <code>4</code></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="af-column-half-right">
|
||
<div class="af-section af-negative">
|
||
<h3>🚫 Exclusions</h3>
|
||
<ul>
|
||
<li>No text in image</li>
|
||
<li>Avoid oversaturation</li>
|
||
<li>No watermarks</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="af-spacer"></div>
|
||
|
||
<div class="af-section af-warning">
|
||
<h3>💡 Tips</h3>
|
||
<p>Use lower CFG for more creative results</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Clickable Links & Actions</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-section af-info">
|
||
<h3>🔗 Interactive Links</h3>
|
||
|
||
<!-- External links (opens in new tab with Ctrl+click) -->
|
||
<h4>External link (opens in new tab with Ctrl+click)</h4>
|
||
<p><a href="https://www.fullframestudios.ch/">Full Frame Studios - Alex Furer</a></p>
|
||
|
||
<h4>Anchor Links</h4>
|
||
<p><a href="https://www.fullframestudios.ch/#ThreeDee">Full Frame Studios - Alex Furer - 3D</a></p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Custom Styling Examples</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-section af-positive">First Section</div>
|
||
|
||
<h2>Custom 12px spacer</h2>
|
||
<div style="height: 12px;"></div>
|
||
|
||
<div class="af-section af-negative">Second Section</div>
|
||
|
||
<h2>Custom 24px spacer</h2>
|
||
<div style="height: 24px;"></div>
|
||
|
||
<div class="af-section af-info">Third Section</div>
|
||
|
||
<h2>Custom 50px spacer</h2>
|
||
<div style="height: 50px;"></div>
|
||
|
||
<div class="af-section af-warning">Fourth Section</div>
|
||
</div>
|
||
|
||
<h1>Custom Color Sections</h1>
|
||
<h2>Custom pink section</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div style="background: rgba(255, 100, 150, 0.1); border-left: 4px solid #ff6496; padding: 12px; border-radius: 6px; margin: 8px 0;">
|
||
<h3 style="color: #ff6496; margin-top: 0;">Custom Pink Section</h3>
|
||
<p>Your content here with custom colors...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Custom teal section</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div style="background: rgba(64, 224, 208, 0.1); border-left: 4px solid #40E0D0; padding: 12px; border-radius: 6px; margin: 8px 0;">
|
||
<h3 style="color: #40E0D0; margin-top: 0;">Custom Teal Section</h3>
|
||
<p>Different color scheme for variety...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Custom orange section</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div style="background: rgba(255, 165, 0, 0.1); border-left: 4px solid #FFA500; padding: 12px; border-radius: 6px; margin: 8px 0;">
|
||
<h3 style="color: #FFA500; margin-top: 0;">Custom Orange Section</h3>
|
||
<p>Create any color combination you need...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Text Examples</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-section af-neutral">
|
||
<!-- Large blue bold text -->
|
||
<p style="font-size: 18px; color: #58a6ff; font-weight: bold;">
|
||
Large blue bold text for emphasis
|
||
</p>
|
||
|
||
<!-- Small gray italic text -->
|
||
<p style="font-size: 12px; color: #888; font-style: italic;">
|
||
Small gray italic text for subtitles
|
||
</p>
|
||
|
||
<!-- Highlighted text -->
|
||
<p style="background: rgba(255, 255, 0, 0.2); padding: 4px 8px; border-radius: 3px;">
|
||
Highlighted text with yellow background
|
||
</p>
|
||
|
||
<!-- Custom monospace -->
|
||
<p style="font-family: 'Courier New', monospace; color: #90EE90; background: rgba(0,0,0,0.4); padding: 8px; border-radius: 4px;">
|
||
Custom monospace text for code-like display
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h1>Custom Border Sections</h1>
|
||
<h2>Dashed border box</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div style="border: 2px dashed #90EE90; padding: 16px; margin: 10px 0; background: rgba(0, 0, 0, 0.2); border-radius: 8px;">
|
||
<p><strong>Dashed Border Box</strong></p>
|
||
<p>Content in a custom dashed border box</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Solid border with shadow effect</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div style="border: 2px solid #58a6ff; padding: 16px; margin: 10px 0; background: rgba(88, 166, 255, 0.05); box-shadow: 0 4px 8px rgba(0,0,0,0.3); border-radius: 8px;">
|
||
<p><strong>Solid Border with Shadow</strong></p>
|
||
<p>Creates depth with shadow effect</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Thick left border</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div style="border-left: 8px solid #BA55D3; padding: 16px; margin: 10px 0; background: rgba(186, 85, 211, 0.1);">
|
||
<p><strong>Thick Left Border</strong></p>
|
||
<p>Emphasizes content with thick accent border</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h1>Align Content</h1>
|
||
<h2>Centered content</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div style="text-align: center; padding: 20px; background: rgba(255,255,255,0.05); border-radius: 8px; margin: 10px 0;">
|
||
<h2 style="margin: 0 0 12px 0;">Centered Title</h2>
|
||
<p style="margin: 0;">Centered paragraph text for announcements</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Right-aligned content</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div style="text-align: right; padding: 10px; border-top: 1px solid #555; margin-top: 20px;">
|
||
<small style="color: #888;">Right-aligned footer note</small>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Flex layout for inline elements</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div style="display: flex; gap: 10px; align-items: center; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 6px;">
|
||
<span style="background: #90EE90; color: #000; padding: 4px 8px; border-radius: 4px; font-weight: bold;">Tag 1</span>
|
||
<span style="background: #58a6ff; color: #fff; padding: 4px 8px; border-radius: 4px; font-weight: bold;">Tag 2</span>
|
||
<span style="background: #FFA500; color: #fff; padding: 4px 8px; border-radius: 4px; font-weight: bold;">Tag 3</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Custom Info Cards</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||
<div style="flex: 1; min-width: 150px; background: rgba(144, 238, 144, 0.1); border: 1px solid #90EE90; padding: 12px; border-radius: 6px; text-align: center;">
|
||
<strong style="color: #90EE90; display: block; margin-bottom: 4px;">Steps</strong>
|
||
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">25</p>
|
||
</div>
|
||
|
||
<div style="flex: 1; min-width: 150px; background: rgba(135, 206, 235, 0.1); border: 1px solid #87CEEB; padding: 12px; border-radius: 6px; text-align: center;">
|
||
<strong style="color: #87CEEB; display: block; margin-bottom: 4px;">CFG Scale</strong>
|
||
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">7.5</p>
|
||
</div>
|
||
|
||
<div style="flex: 1; min-width: 150px; background: rgba(186, 85, 211, 0.1); border: 1px solid #BA55D3; padding: 12px; border-radius: 6px; text-align: center;">
|
||
<strong style="color: #BA55D3; display: block; margin-bottom: 4px;">Batch Size</strong>
|
||
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">4</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Complete Workflow Example</h2>
|
||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||
<div class="af-section af-positive">
|
||
<h2>🟢 Positive Prompts</h2>
|
||
<p><strong>masterpiece, best quality, highly detailed, 8k uhd, professional photography</strong></p>
|
||
<ul>
|
||
<li>Professional lighting and composition</li>
|
||
<li>Sharp focus with bokeh background</li>
|
||
<li>Photorealistic textures and materials</li>
|
||
<li>Award-winning cinematography</li>
|
||
</ul>
|
||
<a href="#" onclick="alert('Positive prompts copied to clipboard!')">📋 Copy Prompts</a>
|
||
</div>
|
||
|
||
<div class="af-spacer"></div>
|
||
|
||
<div class="af-section af-negative">
|
||
<h2>🔴 Negative Prompts</h2>
|
||
<p><em>low quality, worst quality, blurry, out of focus</em></p>
|
||
<p><code>nsfw, watermark, signature, text, bad anatomy, deformed, ugly, mutation</code></p>
|
||
</div>
|
||
|
||
<div class="af-spacer-large"></div>
|
||
|
||
<div class="af-section af-info">
|
||
<h3>ℹ️ Model Information</h3>
|
||
<p>Model: <strong>SDXL 1.0 Base</strong></p>
|
||
<p>Settings: Steps <code>25</code> | CFG <code>7.5</code> | Sampler <code>DPM++ 2M Karras</code></p>
|
||
<p>Resolution: <code>1024x1024</code> | Batch Size: <code>4</code></p>
|
||
<a href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0">📦 Model Page</a>
|
||
</div>
|
||
|
||
<div class="af-spacer"></div>
|
||
|
||
<div class="af-section af-warning">
|
||
<h3>⚠️ System Requirements</h3>
|
||
<p>This workflow requires:</p>
|
||
<ol>
|
||
<li>GPU with 8GB+ VRAM (12GB recommended)</li>
|
||
<li>ComfyUI latest version</li>
|
||
<li>SDXL compatible checkpoint</li>
|
||
<li>Required custom nodes installed</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="af-spacer"></div>
|
||
|
||
<div class="af-section af-neutral">
|
||
<h3>📝 Workflow Notes</h3>
|
||
<p><strong>Tips for best results:</strong></p>
|
||
<ul>
|
||
<li>Verify image dimensions before generating</li>
|
||
<li>Lower CFG (6-7) for more creative interpretations</li>
|
||
<li>Higher CFG (8-10) for more prompt adherence</li>
|
||
<li>Save your workflow frequently!</li>
|
||
</ul>
|
||
<hr>
|
||
<p><small>Last updated: 2025-01-15 | Created with AF Enhanced HTML Node v0.0.5</small></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- END THIS CONTENT TO JS FILE -->
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|
||
|