Added "Pay-to-Download" & Christmas Theme (#1346)

* url update

* feat: for pay

* feat: for pay

* feat: for pay

---------

Co-authored-by: john <john@server31.io>

js/comfyui-share-common.js

@@ -336,7 +336,7 @@ export class ShareDialogChooser extends ComfyDialog {
 				key: "Copus",
 				textContent: "Copus",
 				website: "https://www.copus.io",
-				description: "🔴 Permanently store and secure ownership of your workflow on the open-source platform: <a style='color:var(--input-text);' href='https://copus.io' target='_blank'>Copus.io</a>",
+				description: "🔴 Earn simple. Get paid from your ComfyUI workflows—no revenue sharing. Ever.",
 				onclick: () => {
 					showCopusShareDialog();
 				  this.close();
@@ -356,7 +356,8 @@ export class ShareDialogChooser extends ComfyDialog {
 			});
 
 			buttons.forEach(b => {
-				const button = $el("button", {
+				const button = $el("button", 
+					{
 					type: "button",
 					textContent: b.textContent,
 					onclick: b.onclick,
@@ -369,8 +370,14 @@ export class ShareDialogChooser extends ComfyDialog {
 						'padding': '5px 5px',
 						'margin-bottom': '5px',
 						'transition': 'background-color 0.3s',
+						'position':'relative'
 					}
-				});
+				},
+				[
+					$el("span", { style: { 
+					 } }),
+				]
+			);
 				button.addEventListener('mouseover', () => {
 					button.style.backgroundColor = '#007BFF'; // Change color on hover
 				});
@@ -388,6 +395,28 @@ export class ShareDialogChooser extends ComfyDialog {
 					},
 				});
 
+				const copus_ui =$el("div", { style: { 
+					'position': 'absolute',
+					'height': '100%',
+					'left': '-25px',
+					'top': '-26px',
+					'width': '100%',
+					'z-index':'-1',
+					'background':'url("https://static.copus.io/images/client/202412/test/f28ac6ef8f4c6f3d5d50856a272ed02c.png")',
+					'background-repeat': 'no-repeat',
+				} });
+				const copus_ui_bottom =$el("div", { style: { 
+					'position': 'absolute',
+					'height': '100%',
+					'left': '25px',
+					'bottom': '-26px',
+					'width': '100%',
+					'transform':'scale(-1, -1)',
+					'z-index':'-1',
+					'background':'url("https://static.copus.io/images/client/202412/test/f28ac6ef8f4c6f3d5d50856a272ed02c.png")',
+					'background-repeat': 'no-repeat',
+				} });
+
 				const websiteLink = $el("a", {
 					textContent: "🌐 Website",
 					href: b.website,
@@ -417,7 +446,6 @@ export class ShareDialogChooser extends ComfyDialog {
 						'margin-bottom': '10px',
 					}
 				}, [button, websiteLink]);
-
 				const column = $el("div", {
 					style: {
 						'flex-basis': '100%',
@@ -426,8 +454,17 @@ export class ShareDialogChooser extends ComfyDialog {
 						'border': '1px solid #ddd',
 						'border-radius': '5px',
 						'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.1)',
+						'position':'relative'
 					}
-				}, [buttonLinkContainer, description]);
+				}, [buttonLinkContainer, description
+					, 
+					b.key ==='Copus' ?
+					copus_ui
+					:'',
+					b.key ==='Copus' ?
+					copus_ui_bottom
+					:'',
+				]);
 
 				container.appendChild(column);
 			});

js/comfyui-share-copus.js

@@ -4,10 +4,10 @@ const env = "prod";
 
 let DEFAULT_HOMEPAGE_URL = "https://copus.io";
 
-let API_ENDPOINT = "https://api.client.prod.copus.io/copus-client";
+let API_ENDPOINT = "https://api.client.prod.copus.io";
 
 if (env !== "prod") {
-  API_ENDPOINT = "https://api.dev.copus.io/copus-client";
+  API_ENDPOINT = "https://api.test.copus.io";
   DEFAULT_HOMEPAGE_URL = "https://test.copus.io";
 }
 
@@ -61,6 +61,7 @@ export class CopusShareDialog extends ComfyDialog {
       [$el("div.comfy-modal-content", {}, [...this.createButtons()])]
     );
     this.selectedOutputIndex = 0;
+    this.selectedOutput_lock = 0;
     this.selectedNodeId = null;
     this.uploadedImages = [];
     this.allFilesImages = [];
@@ -190,10 +191,36 @@ export class CopusShareDialog extends ComfyDialog {
       type: "text",
       placeholder: "Subtitle (Optional)",
       style: inputStyle,
-      maxLength: "70",
+      maxLength: "350",
       oninput: () => {
         const titleNum = this.SubTitleInput.value.length;
-        subTitleNumDom.textContent = `${titleNum}/70`;
+        subTitleNumDom.textContent = `${titleNum}/350`;
+      },
+    });
+    this.LockInput = $el("input", {
+      type: "text",
+      placeholder: "",
+      style:  {
+        width: "100px",
+        padding: "7px",
+        borderRadius: "4px",
+        border: "1px solid #ddd",
+        boxSizing: "border-box",
+      },
+      oninput: (event) => {
+        let input = event.target.value;
+        // Use a regular expression to match a number with up to two decimal places
+        const regex = /^\d*\.?\d{0,2}$/;
+        if (!regex.test(input)) {
+          // If the input doesn't match, remove the last entered character
+          event.target.value = input.slice(0, -1);
+        }
+        const numericValue = parseFloat(input);
+        if (numericValue > 9999) {
+          input = "9999";
+        }
+        // Update the input field with the valid value
+        event.target.value = input;
       },
     });
     this.descriptionInput = $el("textarea", {
@@ -297,7 +324,7 @@ export class CopusShareDialog extends ComfyDialog {
           color: "#999",
         },
       },
-      ["0/70"]
+      ["0/350"]
     );
     const descriptionNumDom = $el(
       "label",
@@ -333,6 +360,59 @@ export class CopusShareDialog extends ComfyDialog {
       // descriptionNumDom,
     ]);
     // switch  between outputs section and additional inputs section
+    this.radioButtons_lock = [];
+
+    this.radioButtonsCheck_lock = $el("input", {
+      type: "radio",
+      name: "output_type_lock",
+      value: "0",
+      id: "blockchain1_lock",
+      checked: true,
+    });
+    this.radioButtonsCheckOff_lock = $el("input", {
+      type: "radio",
+      name: "output_type_lock",
+      value: "1",
+      id: "blockchain_lock",
+    });
+
+    const blockChainSection_lock = $el("div", { style: sectionStyle }, [
+      $el("label", { style: labelStyle }, ["6️⃣ Pay to download"]),
+      $el(
+        "label",
+        {
+          style: {
+            marginTop: "10px",
+            display: "flex",
+            alignItems: "center",
+            cursor: "pointer",
+          },
+        },
+        [
+          this.radioButtonsCheck_lock,
+          $el("div", { style: { marginLeft: "5px" ,display:'flex',alignItems:'center'} }, [
+            $el("span", { style: { marginLeft: "5px" } }, ["ON"]),
+            $el("span", { style: { marginLeft: "20px",marginRight:'10px' ,color:'#fff'} }, ["Price US$"]),
+            this.LockInput
+          ]),
+        ]
+      ),
+      $el(
+        "label",
+        { style: { display: "flex", alignItems: "center", cursor: "pointer" } },
+        [
+          this.radioButtonsCheckOff_lock,
+          $el("span", { style: { marginLeft: "5px" } }, ["OFF"]),
+        ]
+      ),
+      
+      $el(
+        "p",
+        { style: { fontSize: "16px", color: "#fff", margin: "10px 0 0 0" } },
+        ["Get paid from your workflow. You can change the price and withdraw your earnings on Copus."]
+      ),
+    ]);
+
     this.radioButtons = [];
 
     this.radioButtonsCheck = $el("input", {
@@ -350,7 +430,7 @@ export class CopusShareDialog extends ComfyDialog {
     });
 
     const blockChainSection = $el("div", { style: sectionStyle }, [
-      $el("label", { style: labelStyle }, ["6️⃣ Store on blockchain "]),
+      $el("label", { style: labelStyle }, ["7️⃣ Store on blockchain "]),
       $el(
         "label",
         {
@@ -380,6 +460,8 @@ export class CopusShareDialog extends ComfyDialog {
         ["Secure ownership with a permanent & decentralized storage"]
       ),
     ]);
+
+
     // Message Section
     this.message = $el(
       "div",
@@ -441,6 +523,7 @@ export class CopusShareDialog extends ComfyDialog {
       SubtitleSection,
       DescriptionSection,
       // contestSection,
+      blockChainSection_lock,
       blockChainSection,
       this.message,
       buttonsSection,
@@ -543,6 +626,8 @@ export class CopusShareDialog extends ComfyDialog {
       subTitle: this.SubTitleInput.value,
       content: this.descriptionInput.value,
       storeOnChain: this.radioButtonsCheck.checked ? true : false,
+      lockState:this.radioButtonsCheck_lock.checked ? 2 : 0,
+      unlockPrice:this.LockInput.value,
     };
 
     if (!this.keyInput.value) {
@@ -557,6 +642,12 @@ export class CopusShareDialog extends ComfyDialog {
       throw new Error("Title is required");
     }
 
+    if(this.radioButtonsCheck_lock.checked){
+      if (!this.LockInput.value){
+        throw new Error("Price is required");
+      }
+    }
+
     if (!this.uploadedImages.length) {
       if (this.selectedFile) {
         await this.uploadThumbnail(this.selectedFile);