Update README.md

README.md

@@ -1,2 +1,135 @@
-# ComfyUI-AF_Enhanced_HTML_Note
-An ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.
+# AF Enhanced HTML Node - Usage Guide
+
+## Basic Section Colors
+
+```html
+<!-- Positive section (green) -->
+<div class="af-section af-positive">
+    <h2>🟢 Positive Prompts</h2>
+    <p>Your positive prompts go here...</p>
+</div>
+
+<!-- Negative section (red) -->
+<div class="af-section af-negative">
+    <h2>🔴 Negative Prompts</h2>
+    <p>Your negative prompts go here...</p>
+</div>
+
+<!-- Neutral section (gray) -->
+<div class="af-section af-neutral">
+    <h3>📝 Notes</h3>
+    <p>General notes and information...</p>
+</div>
+
+<!-- Info section (blue) -->
+<div class="af-section af-info">
+    <h3>ℹ️ Information</h3>
+    <p>Important information...</p>
+</div>
+
+<!-- Warning section (yellow) -->
+<div class="af-section af-warning">
+    <h3>⚠️ Warning</h3>
+    <p>Warning or caution messages...</p>
+</div>
+
+<!-- Custom section (purple) -->
+<div class="af-section af-custom">
+    <h3>🎨 Custom</h3>
+    <p>Custom styled content...</p>
+</div>
+```
+
+## Spacers
+
+```html
+<!-- Small spacer -->
+<div class="af-spacer-small"></div>
+
+<!-- Regular spacer -->
+<div class="af-spacer"></div>
+
+<!-- Large spacer -->
+<div class="af-spacer-large"></div>
+
+<!-- Extra large spacer -->
+<div class="af-spacer-xl"></div>
+```
+
+## Clickable Links
+
+```html
+<!-- External link -->
+<a href="https://github.com/comfyanonymous/ComfyUI" target="_blank">ComfyUI GitHub</a>
+
+<!-- Link with custom action -->
+<a href="#" onclick="alert('Custom action triggered!')">Click for alert</a>
+
+<!-- Link with data attribute for custom handling -->
+<a href="#" data-action="custom-command">Custom Command</a>
+```
+
+## Complete Example Template
+
+```html
+<div class="af-section af-positive">
+    <h2>🟢 Positive Prompts</h2>
+    <p>masterpiece, best quality, highly detailed</p>
+    <ul>
+        <li>Professional lighting</li>
+        <li>Sharp focus</li>
+        <li>8K resolution</li>
+    </ul>
+</div>
+
+<div class="af-spacer"></div>
+
+<div class="af-section af-negative">
+    <h2>🔴 Negative Prompts</h2>
+    <p>low quality, blurry, distorted</p>
+    <code>nsfw, watermark, signature</code>
+</div>
+
+<div class="af-spacer-large"></div>
+
+<div class="af-section af-info">
+    <h3>ℹ️ Model Information</h3>
+    <p>Using: <strong>SDXL 1.0</strong></p>
+    <p>Steps: <em>25</em> | CFG: <em>7.5</em></p>
+    <a href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0" target="_blank">Model Page</a>
+</div>
+
+<div class="af-spacer"></div>
+
+<div class="af-section af-neutral">
+    <h3>📝 Notes</h3>
+    <p>Remember to:</p>
+    <ol>
+        <li>Check image dimensions</li>
+        <li>Adjust sampling method</li>
+        <li>Fine-tune CFG scale</li>
+    </ol>
+    <hr>
+    <p><small>Last updated: Today</small></p>
+</div>
+```
+
+## Features
+
+- **No external dependencies** - All CSS is inlined to avoid loading issues
+- **Colored sections** - 6 predefined color schemes (positive, negative, neutral, info, warning, custom)
+- **Flexible spacers** - 4 different spacer sizes
+- **Clickable links** - Support for external links and custom actions
+- **Responsive design** - Works on different screen sizes
+- **HTML support** - Full HTML formatting (lists, tables, code blocks, etc.)
+- **Custom scrollbars** - Styled to match ComfyUI theme
+
+## Installation
+
+1. Create folder: `ComfyUI/custom_nodes/ComfyUI-AF_Enhanced_HTML/`
+2. Add the Python file: `AF_Enhanced_HTML.py`
+3. Add the init file: `__init__.py`
+4. Create `web/` subfolder
+5. Add the JavaScript file: `web/AF_Enhanced_HTML.js`
+6. Restart ComfyUI
+7. Find the node under **AF > AF - Enhanced HTML**