v0.0.07

Cosmetics, making this a version

AF_Enhanced_HTML_Note.py

@@ -2,19 +2,22 @@
 #
 # Creator: Alex Furer - Co-Creator(s): Claude AI & DeepSeek
 #
-# Praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI_AF_FindNodeByID
+# Description:
+# A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.
+#
+# Repo and ReadMe URL: https://github.com/alFrame/ComfyUI-AF-Find-Nodes
+#
+# Praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI-AF-Find-Nodes/issues
 #
 # LICENSE: MIT License
 #
-# v0.0.06
-#
-# Description:
-# A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.
+# v0.0.07
 #
 # Usage:
 # Read Me on Github
 #
 # Changelog:
+# "v0.0.07 - Comsetics, making tis a version",
 # "v0.0.06 - Removed all Java Script functionality for links and updated README",
 # "v0.0.05 - Made edit mode less intrusive and keep ComfyUI canvas navigation (panning, zooming [space bar] and [H] now work to pan around the canvas)",
 # "v0.0.04 - Fixed node selection and resizing by removing OUTPUT_NODE and using proper widget approach. Double clicking is now used to edit the html Mouse interaction is now persistent to ComfyUI behavior. Except middle mouse button for panning.",
@@ -22,6 +25,8 @@
 # "v0.0.02 - Fixed naming consistency to HTML_Note Implemented single-window toggle behavior",
 # "v0.0.01 - Initial Version"
 #
+# Feature Requests / Wet Dreams
+# -
 
 class AF_Enhanced_HTML_Note:
     """

README.md

@@ -20,6 +20,35 @@ A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's dire
 
 ---
 
+## 🛠️ Installation
+
+### Via ComfyUI Manager (Recommended)
+1. Open ComfyUI Manager
+2. Search for "AF - Enhanced HTML Note"
+3. Install
+
+### Manual Installation
+1. Clone this repository into your `ComfyUI/custom_nodes/` directory:
+   ```bash
+   git clone https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note.git
+	```
+	
+---
+
+## ⚠️ Disclaimer
+
+This ComfyUI custom node is developed through AI-assisted coding, prompted and directed by a human developer. While considerable care has been taken to ensure proper functionality, security, and compatibility, this software is provided **"as is" without warranty of any kind**, express or implied.
+
+**By using this custom node, you acknowledge that:**
+- You install and run this software at your own risk
+- The creator is not liable for any damages, data loss, or issues arising from its use
+- Compatibility with your specific setup is not guaranteed
+- You should test thoroughly in a safe environment before production use
+
+This node has been carefully designed and tested, but individual system configurations may vary. Please report any issues on the GitHub repository.
+
+---
+
 ## 🎮 Interaction Guide
 
 ### Editing Content
@@ -60,7 +89,7 @@ The node comes with several predefined colored section styles. Click each sectio
 ```
 
 ### Rendered Result:
-![Positive Section Example](examples/positive-section.png)
+![Positive Section Example](examples/positive-section.webp)
 
 </details>
 
@@ -77,7 +106,7 @@ The node comes with several predefined colored section styles. Click each sectio
 ```
 
 ### Rendered Result:
-![Negative Section Example](examples/negative-section.png)
+![Negative Section Example](examples/negative-section.webp)
 
 </details>
 
@@ -98,7 +127,7 @@ The node comes with several predefined colored section styles. Click each sectio
 ```
 
 ### Rendered Result:
-![Neutral Section Example](examples/neutral-section.png)
+![Neutral Section Example](examples/neutral-section.webp)
 
 </details>
 
@@ -115,7 +144,7 @@ The node comes with several predefined colored section styles. Click each sectio
 ```
 
 ### Rendered Result:
-![Info Section Example](examples/info-section.png)
+![Info Section Example](examples/info-section.webp)
 
 </details>
 
@@ -136,7 +165,7 @@ The node comes with several predefined colored section styles. Click each sectio
 ```
 
 ### Rendered Result:
-![Warning Section Example](examples/warning-section.png)
+![Warning Section Example](examples/warning-section.webp)
 
 </details>
 
@@ -152,7 +181,7 @@ The node comes with several predefined colored section styles. Click each sectio
 ```
 
 ### Rendered Result:
-![Yellow Section Example](examples/yellow-section.png)
+![Yellow Section Example](examples/yellow-section.webp)
 
 </details>
 
@@ -168,7 +197,7 @@ The node comes with several predefined colored section styles. Click each sectio
 ```
 
 ### Rendered Result:
-![Blue Section Example](examples/blue-section.png)
+![Blue Section Example](examples/blue-section.webp)
 
 </details>
 
@@ -184,7 +213,7 @@ The node comes with several predefined colored section styles. Click each sectio
 ```
 
 ### Rendered Result:
-![Custom Section Example](examples/custom-section.png)
+![Custom Section Example](examples/custom-section.webp)
 
 </details>
 
@@ -233,7 +262,7 @@ Use these spacer classes to control vertical spacing between elements.
 ```
 
 ### Rendered Result:
-![Spacer Examples](examples/spacers.png)
+![Spacer Examples](examples/spacers.webp)
 
 ### Size Reference:
 - `af-spacer-top` → 2px
@@ -297,7 +326,7 @@ Create two-column layouts using the predefined column classes.
 ```
 
 ### Rendered Result:
-![Two Column Layout Example](examples/two-column-layout.png)
+![Two Column Layout Example](examples/two-column-layout.webp)
 
 **Note:** The `row` class ensures proper column wrapping, and each column is 49% width with 1% margin.
 
@@ -331,11 +360,13 @@ All links require **Ctrl+Click** to activate for safety and to prevent accidenta
 </div>
 ```
 
-### Rendered Result:
-![Link Examples](examples/links.png)
-
 **Remember:** Hold **Ctrl** while clicking any link to activate it!
 
+### Rendered Result:
+![Link Examples](examples/links.webp)
+
+</details>
+
 ### Supported Link Types:
 - ✅ **External URLs** (`https://`, `http://`) - Open in new tab
 - ✅ **Anchor links** (`#section`) - Page navigation  
@@ -347,7 +378,14 @@ All links require **Ctrl+Click** to activate for safety and to prevent accidenta
 - ❌ **JavaScript links** (`javascript:`) - Blocked for security
 - ❌ **onclick handlers** - Ignored for security
 
-</details>
+### Security Restrictions:
+- **No JavaScript execution** - All JavaScript is blocked for security
+- **No `<script>` tags** - Script tags are not executed
+- **No external scripts** - Cannot load external JavaScript files
+- **Ctrl+Click required** - All link interactions require Control key
+- **Safe HTML only** - Only styling and navigation features are supported
+- **No DOM manipulation** - JavaScript cannot modify the HTML content
+- **No browser storage** - `localStorage` and `sessionStorage` are blocked
 
 ---
 
@@ -367,52 +405,6 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
 
 ---
 
-## ⚠️ JavaScript Limitations
-
-JavaScript functionality is limited for security. It **only works on `<a>` (link) elements** and **only when Ctrl+Click is used**.
-
-### ✅ What Works (with Ctrl+Click on links):
-```html
-<!-- ✅ Alert dialogs -->
-<a href="#" onclick="alert('Hello!')">Alert on click</a>
-
-<!-- ✅ Console logging -->
-<a href="#" onclick="console.log('Debug info')">Log to console</a>
-
-<!-- ✅ Confirmation dialogs -->
-<a href="javascript:confirm('Are you sure?')">Confirmation dialog</a>
-
-<!-- ✅ Multiple statements -->
-<a href="#" onclick="alert('First'); console.log('Second')">Multiple actions</a>
-```
-
-### ❌ What Doesn't Work:
-```html
-<!-- ❌ JavaScript links are blocked -->
-<a href="javascript:alert('Hello')">JavaScript link</a>
-
-<!-- ❌ onclick handlers are ignored -->
-<a href="#" onclick="alert('This wont work')">Alert link</a>
-
-<!-- ❌ Script tags are ignored -->
-<script>console.log('Not executed')</script>
-
-<!-- ❌ Event handlers on other elements -->
-<button onclick="alert('No')">Won't work</button>
-<div onclick="alert('No')">Won't work</div>
-```
-
-### Security Restrictions:
-- **No JavaScript execution** - All JavaScript is blocked for security
-- **No `<script>` tags** - Script tags are not executed
-- **No external scripts** - Cannot load external JavaScript files
-- **Ctrl+Click required** - All link interactions require Control key
-- **Safe HTML only** - Only styling and navigation features are supported
-- **No DOM manipulation** - JavaScript cannot modify the HTML content
-- **No browser storage** - `localStorage` and `sessionStorage` are blocked
-
----
-
 ## 🎨 Custom Styling Examples
 
 <details>
@@ -439,7 +431,7 @@ JavaScript functionality is limited for security. It **only works on `<a>` (link
 ```
 
 ### Rendered Result:
-![Custom Spacers](examples/custom-spacers.png)
+![Custom Spacers](examples/custom-spacers.webp)
 
 </details>
 
@@ -468,7 +460,7 @@ JavaScript functionality is limited for security. It **only works on `<a>` (link
 ```
 
 ### Rendered Result:
-![Custom Colors](examples/custom-colors.png)
+![Custom Colors](examples/custom-colors.webp)
 
 </details>
 
@@ -501,7 +493,7 @@ JavaScript functionality is limited for security. It **only works on `<a>` (link
 ```
 
 ### Rendered Result:
-![Custom Text Styles](examples/custom-text.png)
+![Custom Text Styles](examples/custom-text.webp)
 
 </details>
 
@@ -530,7 +522,7 @@ JavaScript functionality is limited for security. It **only works on `<a>` (link
 ```
 
 ### Rendered Result:
-![Custom Borders](examples/custom-borders.png)
+![Custom Borders](examples/custom-borders.webp)
 
 </details>
 
@@ -559,7 +551,7 @@ JavaScript functionality is limited for security. It **only works on `<a>` (link
 ```
 
 ### Rendered Result:
-![Custom Layouts](examples/custom-layouts.png)
+![Custom Layouts](examples/custom-layouts.webp)
 
 </details>
 
@@ -587,7 +579,7 @@ JavaScript functionality is limited for security. It **only works on `<a>` (link
 ```
 
 ### Rendered Result:
-![Custom Info Cards](examples/custom-cards.png)
+![Custom Info Cards](examples/custom-cards.webp)
 
 </details>
 
@@ -660,24 +652,12 @@ JavaScript functionality is limited for security. It **only works on `<a>` (link
 ```
 
 ### Rendered Result:
-![Complete Workflow Example](examples/complete-workflow.png)
+![Complete Workflow Example](examples/complete-workflow.webp)
 
 </details>
 
 ---
 
-## 🛠️ Installation
-
-1. Create folder: `ComfyUI/custom_nodes/ComfyUI-AF_Enhanced_HTML_Note/`
-2. Add the Python file: `AF_Enhanced_HTML_Note.py`
-3. Add the init file: `__init__.py`
-4. Create `web/` subfolder
-5. Add the JavaScript file: `web/AF_Enhanced_HTML_Note.js`
-6. Restart ComfyUI
-7. Find the node under **AF - Nodes > AF - Enhanced HTML Note**
-
----
-
 ## 🐛 Troubleshooting
 
 <details>
@@ -758,41 +738,6 @@ JavaScript functionality is limited for security. It **only works on `<a>` (link
 
 - **Creator:** Alex Furer
 - **Co-Creators:** Claude AI & DeepSeek
-- **GitHub:** [ComfyUI_AF_FindNodeByID](https://github.com/alFrame/ComfyUI_AF_FindNodeByID)
+- **GitHub:** [ComfyUI_AF_FindNodes](https://github.com/alFrame/ComfyUI-AF-Find-Nodes)
 - **License:** MIT License
-- **Version:** 0.0.5
-
----
-
-## 📸 Creating Example Screenshots
-
-To create the example images referenced in this README:
-
-1. Open ComfyUI and add the AF Enhanced HTML Note node
-2. Copy each example code from the collapsible sections above
-3. Paste into the node and exit edit mode
-4. Take a screenshot of the rendered result
-5. Save as PNG in the `examples/` folder with the corresponding filename
-6. Commit and push to your repository
-
-**Required Screenshots:**
-- `positive-section.png`
-- `negative-section.png`
-- `neutral-section.png`
-- `info-section.png`
-- `warning-section.png`
-- `yellow-section.png`
-- `blue-section.png`
-- `custom-section.png`
-- `spacers.png`
-- `two-column-layout.png`
-- `links.png`
-- `custom-spacers.png`
-- `custom-colors.png`
-- `custom-text.png`
-- `custom-borders.png`
-- `custom-layouts.png`
-- `custom-cards.png`
-- `complete-workflow.png`
-
-Once you add the screenshots, the README will automatically display them!
+- **Version:** 0.0.5

__init__.py

@@ -19,6 +19,7 @@ __title__ = "AF - Enhanced HTML Note"
 __description__ = " ComfyUI custom node that allows you to create a note node with HTML support."
 __license__ = "MIT"
 __changelog__ = [
+    "v0.0.07 - Comsetics, making tis a version",
     "v0.0.06 - Removed all Java Script functionality for links and updated README",
     "v0.0.05 - Made edit mode less intrusive and keep ComfyUI canvas navigation (panning, zooming [space bar] and [H] now work to pan around the canvas)",
     "v0.0.04 - Fixed node selection and resizing by removing OUTPUT_NODE and using proper widget approach. Double clicking is now used to edit the html Mouse interaction is now persistent to ComfyUI behavior. Except middle mouse button for panning.",

helpers/ComfyUI-AF-Html-Note_Example-HTML/ComfyUI-AF-Enhanced_HTML_Note_AllSyleExamples.html

@@ -184,24 +184,16 @@
 
 <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 link (opens in new tab with Ctrl+click) -->
-        <p><a href="https://github.com/comfyanonymous/ComfyUI">ComfyUI GitHub Repository</a></p>
-        
-        <!-- Alert action (triggers with Ctrl+click) -->
-        <p><a href="#" onclick="alert('Custom action triggered!')">Click for alert</a></p>
-        
-        <!-- Console log action -->
-        <p><a href="#" onclick="console.log('Debug message logged')">Log to console</a></p>
-        
-        <!-- Multiple actions -->
-        <p><a href="https://example.com" onclick="console.log('Link clicked')">Link with logging</a></p>
-        
-        <!-- JavaScript links -->
-        <p><a href="javascript:alert('Hello from JavaScript!')">JavaScript alert link</a></p>
-    </div>
+	<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>