Upload 5 files

static/cloudhands/index.modern.js

@@ -0,0 +1 @@
+var e;function t(e,t,n){const s=document.createElement("div");s.style.display="flex",s.style.flexDirection="column",s.style.alignItems="flex-end",s.style.width="fit-content",s.style.fontFamily="Roboto, sans-serif";const o=document.createElement("button"),r=document.createElement("span");r.textContent=`$${t.charge}`,r.style.fontWeight="bold";const a=document.createElement("span");a.textContent=" / Generation",o.appendChild(r),o.appendChild(a),o.style.margin="0.5rem",o.style.padding="1rem 4rem",o.style.backgroundColor="hsla(280, 68%, 60%, 1)",o.style.color="white",o.style.border="none",o.style.fontSize="24px",o.style.alignItems="center",o.style.justifyContent="center",o.style.display="flex",o.style.gap="0.5rem",o.style.borderRadius="8px",o.style.width="fit-content";const i=function(){const e="http://www.w3.org/2000/svg",t=document.createElementNS(e,"svg");t.setAttribute("width","30"),t.setAttribute("height","30"),t.setAttribute("viewBox","0 0 800 800");const n=document.createElementNS(e,"rect");n.setAttribute("width","800.12"),n.setAttribute("height","800.12"),n.setAttribute("x","0.4"),n.setAttribute("y","0.26"),n.setAttribute("rx","96.52"),n.setAttribute("ry","96.52"),n.setAttribute("fill","hsla(280, 68%, 60%, 1)"),t.appendChild(n);const s=document.createElementNS(e,"path");s.setAttribute("d","M674.74 399.88s54.16 117.48 8.73 211.82H543.71s-1.75-89.1 61.14-132.77c62.89-43.67 69.88-79.05 69.88-79.05Z"),s.setAttribute("fill","#ffffff"),t.appendChild(s);const o=document.createElementNS(e,"path");o.setAttribute("d","M424.05 369.75s-.87-120.15 110.93-159.65c0 0 127.53-43.97 148.49-62.7 0 0 10.48 86.09-78.61 93.95 0 0 73.37 75.99 34.07 159.85-39.31 83.86-158.1 77.74-194.79 23.58 0 0-19.97-26.04-20.09-26.2-1.59-2.07 7.93-7.46 9.12-7.71 11.38-2.42 18.97 11.24 26 17.59 22.97 20.76 57.51 31.51 88.05 26.28 44.16-7.56 70.84-45.84 70.41-88.96-.41-41.36-25.05-72.95-63.67-86.96-90.69-32.9-129.9 110.93-129.9 110.93ZM399.09 369.75s.87-120.15-110.93-159.65c0 0-127.53-43.97-148.49-62.7 0 0-10.48 86.09 78.61 93.95 0 0-73.37 75.99-34.07 159.85 39.31 83.86 158.1 77.74 194.79 23.58 0 0 19.91-25.97 20.09-26.2 2.49-3.25-10.73-7.94-12.29-7.9-10.39.23-19.99 15.39-27.57 21.23-21.37 16.48-48.51 26.3-75.67 23.86-46.15-4.15-77.31-42.05-78.02-86.9-.68-42.54 23.81-75.6 63.66-90.05 90.69-32.9 129.9 110.93 129.9 110.93Z"),o.setAttribute("fill","#ffffff"),t.appendChild(o);const r=document.createElementNS(e,"path");r.setAttribute("d","M148.89 399.88s-54.16 117.48-8.73 211.82h139.76s1.75-89.1-61.14-132.77c-62.89-43.67-69.88-79.05-69.88-79.05Z"),r.setAttribute("fill","#ffffff"),t.appendChild(r);const a=document.createElementNS(e,"path");a.setAttribute("d","M411.82 147.42S345 145.7 272.93 178.46c0 0 91.28 24.46 138.89 94.34 47.61-69.88 138.89-94.34 138.89-94.34-72.06-32.76-138.89-31.04-138.89-31.04Z"),a.setAttribute("fill","#ffffff"),t.appendChild(a);const i=document.createElementNS(e,"circle");i.setAttribute("cx","522.31"),i.setAttribute("cy","346.16"),i.setAttribute("r","53.72"),i.setAttribute("fill","#2dd4e0"),t.appendChild(i);const c=document.createElementNS(e,"circle");c.setAttribute("cx","298.26"),c.setAttribute("cy","346.16"),c.setAttribute("r","53.72"),c.setAttribute("fill","#2dd4e0"),t.appendChild(c);const l=document.createElementNS(e,"path");return l.setAttribute("d","M410.25 372.31c-6.56.27-11.51.16-17.12 4.11-5.18 3.65-9.76 8.09-13.85 12.91-2.04 2.41-21 30.77-20.19 31.14 12.37 5.97 22.2 16.26 30.1 27.5 7.89 11.25 14.09 23.57 21.1 35.39 7.01-11.82 13.21-24.15 21.11-35.4 7.9-11.25 17.73-21.54 30.11-27.51-8.57-15.26-17.46-30.9-31.09-41.87-3.57-2.87-7.58-5.45-12.1-6.18-2.29-.37-4.64-.26-6.96-.15-.38.02-.74.03-1.11.05Z"),l.setAttribute("fill","#ffffff"),t.appendChild(l),t}();o.prepend(i);const c=document.createElement("div");c.style.display="flex",c.style.margin="0.5rem",c.style.alignItems="center",c.style.justifyContent="center",c.style.backgroundColor="#78788014",c.style.borderRadius="24px",c.style.width="fit-content",c.style.boxSizing="border-box",c.style.display="none";const l=document.createElement("img");l.src=e.getAvatar(),l.alt="Avatar",l.style.width="32px",l.style.height="32px",l.style.borderRadius="50%",l.style.marginRight="1rem",c.appendChild(l);const d=document.createElement("span");d.textContent=e.getUsername(),d.style.fontSize="20px",d.style.fontWeight="medium",d.style.marginRight="1rem",d.style.color="black",c.appendChild(d);const h=document.createElement("button");h.textContent="▼",h.style.background="none",h.style.border="none",h.style.cursor="pointer",h.style.fontSize="1rem",h.style.marginRight="0.5rem",h.style.color="black",c.appendChild(h);const u=document.createElement("div");u.style.position="absolute",u.style.backgroundColor="#ffffff",u.style.border="1px solid #ccc",u.style.borderRadius="8px",u.style.boxShadow="0 4px 6px rgba(0, 0, 0, 0.1)",u.style.padding="0.5rem",u.style.marginTop="0.5rem",u.style.display="none",u.style.zIndex="1000",u.style.top="100%",u.style.right="0",u.style.width="fit-content",u.style.boxSizing="border-box";const p=document.createElement("button");p.textContent="Logout",p.style.background="none",p.style.border="none",p.style.cursor="pointer",p.style.fontSize="1rem",p.style.color="red",p.style.padding="0.5rem 1rem",p.style.textAlign="left",p.style.width="100%",p.addEventListener("click",()=>{e.logout(),c.style.display="none",location.reload()}),u.appendChild(p),c.style.position="relative",c.appendChild(u),h.addEventListener("click",()=>{u.style.display="none"===u.style.display?"block":"none"}),document.addEventListener("click",e=>{c.contains(e.target)||(u.style.display="none")}),s.appendChild(o),s.appendChild(c);const m=document.createElement("span");return m.style.color="red",m.style.margin="0.5rem 0",m.style.fontSize="1rem",m.className="error-message",m.style.display="none",s.insertBefore(m,c),e.IsAuthenticated()&&(l.src=e.getAvatar(),d.textContent=e.getUsername(),c.style.display="flex"),o.addEventListener("click",async()=>{e.IsAuthenticated()||await e.Authenticate(),e.IsAuthenticated()&&(l.src=e.getAvatar(),d.textContent=e.getUsername(),c.style.display="flex",e.CloudhandsPurchase(t).then(e=>{e.success?(m.style.display="none",n(e)):(console.log(e),m.textContent=`${e.message||"Unknown error"}`,m.style.display="block",s.insertBefore(m,c))}))}),s}!function(e){e[e.Each=0]="Each",e[e.Monthly=1]="Monthly"}(e||(e={}));class n{constructor(e){this.clientId=void 0,this.codeVerifier=void 0,this.state=void 0,this.NEXT_PUBLIC_API_URL="http://api.localhost:5000",this.NEXT_PUBLIC_LIVE_URL="https://api.cloudhands.ai",this.SDK_VERSION="1.0.0",this.clientId=e,this.codeVerifier=this.getCodeVerifier(),this.state=this.getState()}async Authenticate(){const e=this.HandleRedirect();if(!e){const e=await this.GetAuthUrl(),t=window.open(e,"CloudhandsAuth","width=600,height=800,scrollbars=no,resizable=no");if(!t)throw new Error("Failed to open authentication popup.");const n=500;return new Promise((e,s)=>{const o=setInterval(()=>{try{if(!t||t.closed)return clearInterval(o),void s(new Error("Authentication popup was closed."));const n=new URLSearchParams(t.location.search),r=n.get("code"),a=n.get("state");if(r&&a){if(a!==this.state)return clearInterval(o),t.close(),void s(new Error("Invalid state parameter."));clearInterval(o),t.close(),this.ExchangeCodeForToken(r).then(e).catch(s)}}catch(e){}},n)})}{const{code:t}=e;await this.ExchangeCodeForToken(t)}}HandleRedirect(){const e=new URLSearchParams(window.location.search),t=e.get("code"),n=e.get("state");return t&&n?{code:t,state:n}:null}IsAuthenticated(){return!!this.getAccessToken()}CreateCharge(t,n,s=e.Each,o={}){return{author_id:this.clientId,sdk_version:this.SDK_VERSION,charge_type:s,charge:t,event_name:n,metadata:o}}async GetAuthUrl(){const e=`${window.location.href}`;this.state=this.generateRandomString(16,16);const t=await this.generateCodeChallenge(this.codeVerifier);return`https://cloudhands.ai/auth?response_type=code&client_id=${this.clientId}&redirect_uri=${e}&state=${this.state}&code_challenge=${t}&code_challenge_method=S256`}async ExchangeCodeForToken(e){const t=`${this.NEXT_PUBLIC_LIVE_URL}/token`,n=`${window.location.href}`;try{const s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({code:e,clientId:this.clientId,redirectUri:n,code_Verifier:this.codeVerifier})});if(!s.ok)throw new Error(`Error fetching token: ${s.statusText}`);const o=await s.json();document.cookie=`cloudhands_access_token=${o.access_token}; path=/; max-age=3600`,document.cookie=`cloudhands_username=${o.username}; path=/; max-age=3600`,document.cookie=`cloudhands_avatar=https://cdn.cloudhands.ai/avatar/${o.avatar}; path=/; max-age=3600`}catch(e){console.error("Error exchanging code for token:",e)}}async CloudhandsPurchase(e){const t=`${this.NEXT_PUBLIC_LIVE_URL}/sdk/charge`;try{const n=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.getAccessToken()}`},body:JSON.stringify(e)});if(!n.ok){console.log(n);const e=`Cloudhands response was not ok: ${n.statusText}`;return console.error(e),{success:!1,message:e}}const s=await n.json();if(s.isSuccessful)return{success:!0,message:"Purchase completed successfully."};{const e=`${s.errors[0]||"Unknown error"}`;return console.error(e),{success:!1,message:e}}}catch(e){const t=`Fetch error: ${e instanceof Error?e.message:String(e)}`;return console.error(t),{success:!1,message:t}}}generateRandomString(e,t){const n=Math.floor(Math.random()*(t-e+1))+e;let s="";for(let e=0;e<n;e++)s+="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~".charAt(Math.floor(66*Math.random()));return s}async generateCodeChallenge(e){const t=(new TextEncoder).encode(e),n=await crypto.subtle.digest("SHA-256",t);return btoa(String.fromCharCode(...new Uint8Array(n))).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,"")}getState(){let e=this.getCookie("cloudhands_state");if(!e){e=this.generateRandomString(16,16);const t=new Date(Date.now()+3e5).toUTCString();document.cookie=`cloudhands_state=${e}; expires=${t}; path=/`}return e}getCodeVerifier(){let e=this.getCookie("cloudhands_code_verifier");if(!e){e=this.generateRandomString(43,128);const t=new Date(Date.now()+3e5).toUTCString();document.cookie=`cloudhands_code_verifier=${e}; expires=${t}; path=/`}return e}getCookie(e){const t=document.cookie.match(new RegExp(`(?:^|; )${e}=([^;]*)`));return t?decodeURIComponent(t[1]):null}getAvatar(){return this.getCookie("cloudhands_avatar")||"https://cdn.cloudhands.ai/avatar/default.png"}getUsername(){return this.getCookie("cloudhands_username")||"Guest"}getAccessToken(){return this.getCookie("cloudhands_access_token")||null}logout(){["cloudhands_access_token","cloudhands_username","cloudhands_avatar","cloudhands_state","cloudhands_code_verifier"].forEach(e=>{document.cookie=`${e}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`});const e=new URL(window.location.href);e.searchParams.delete("code"),e.searchParams.delete("state"),window.history.replaceState({},document.title,e.toString())}}export{e as ChargeType,t as CloudhandsButton,n as default};

static/cloudhands/index.umd.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e||self).cloudhands={})}(this,function(e){var t;function n(e,t){try{var n=e()}catch(e){return t(e)}return n&&n.then?n.then(void 0,t):n}e.ChargeType=void 0,(t=e.ChargeType||(e.ChargeType={}))[t.Each=0]="Each",t[t.Monthly=1]="Monthly";var r=/*#__PURE__*/function(){function t(e){this.clientId=void 0,this.codeVerifier=void 0,this.state=void 0,this.NEXT_PUBLIC_API_URL="http://api.localhost:5000",this.NEXT_PUBLIC_LIVE_URL="https://api.cloudhands.ai",this.SDK_VERSION="1.0.0",this.clientId=e,this.codeVerifier=this.getCodeVerifier(),this.state=this.getState()}var r=t.prototype;return r.Authenticate=function(){try{var e=this,t=e.HandleRedirect();return Promise.resolve(t?Promise.resolve(e.ExchangeCodeForToken(t.code)).then(function(){}):Promise.resolve(e.GetAuthUrl()).then(function(t){var n=window.open(t,"CloudhandsAuth","width=600,height=800,scrollbars=no,resizable=no");if(!n)throw new Error("Failed to open authentication popup.");return new Promise(function(t,r){var o=setInterval(function(){try{if(!n||n.closed)return clearInterval(o),void r(new Error("Authentication popup was closed."));var a=new URLSearchParams(n.location.search),s=a.get("code"),i=a.get("state");if(s&&i){if(i!==e.state)return clearInterval(o),n.close(),void r(new Error("Invalid state parameter."));clearInterval(o),n.close(),e.ExchangeCodeForToken(s).then(t).catch(r)}}catch(e){}},500)})}))}catch(e){return Promise.reject(e)}},r.HandleRedirect=function(){var e=new URLSearchParams(window.location.search),t=e.get("code"),n=e.get("state");return t&&n?{code:t,state:n}:null},r.IsAuthenticated=function(){return!!this.getAccessToken()},r.CreateCharge=function(t,n,r,o){return void 0===r&&(r=e.ChargeType.Each),void 0===o&&(o={}),{author_id:this.clientId,sdk_version:this.SDK_VERSION,charge_type:r,charge:t,event_name:n,metadata:o}},r.GetAuthUrl=function(){try{var e=this,t=""+window.location.href;return e.state=e.generateRandomString(16,16),Promise.resolve(e.generateCodeChallenge(e.codeVerifier)).then(function(n){return"https://cloudhands.ai/auth?response_type=code&client_id="+e.clientId+"&redirect_uri="+t+"&state="+e.state+"&code_challenge="+n+"&code_challenge_method=S256"})}catch(e){return Promise.reject(e)}},r.ExchangeCodeForToken=function(e){try{var t=this,r=t.NEXT_PUBLIC_LIVE_URL+"/token",o=""+window.location.href;return Promise.resolve(n(function(){return Promise.resolve(fetch(r,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({code:e,clientId:t.clientId,redirectUri:o,code_Verifier:t.codeVerifier})})).then(function(e){if(!e.ok)throw new Error("Error fetching token: "+e.statusText);return Promise.resolve(e.json()).then(function(e){document.cookie="cloudhands_access_token="+e.access_token+"; path=/; max-age=3600",document.cookie="cloudhands_username="+e.username+"; path=/; max-age=3600",document.cookie="cloudhands_avatar=https://cdn.cloudhands.ai/avatar/"+e.avatar+"; path=/; max-age=3600"})})},function(e){console.error("Error exchanging code for token:",e)}))}catch(e){return Promise.reject(e)}},r.CloudhandsPurchase=function(e){try{var t=this,r=t.NEXT_PUBLIC_LIVE_URL+"/sdk/charge";return Promise.resolve(n(function(){return Promise.resolve(fetch(r,{method:"POST",headers:{"Content-Type":"application/json",Authorization:"Bearer "+t.getAccessToken()},body:JSON.stringify(e)})).then(function(e){if(!e.ok){console.log(e);var t="Cloudhands response was not ok: "+e.statusText;return console.error(t),{success:!1,message:t}}return Promise.resolve(e.json()).then(function(e){if(e.isSuccessful)return{success:!0,message:"Purchase completed successfully."};var t=""+(e.errors[0]||"Unknown error");return console.error(t),{success:!1,message:t}})})},function(e){var t="Fetch error: "+(e instanceof Error?e.message:String(e));return console.error(t),{success:!1,message:t}}))}catch(e){return Promise.reject(e)}},r.generateRandomString=function(e,t){for(var n=Math.floor(Math.random()*(t-e+1))+e,r="",o=0;o<n;o++)r+="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~".charAt(Math.floor(66*Math.random()));return r},r.generateCodeChallenge=function(e){try{var t=(new TextEncoder).encode(e);return Promise.resolve(crypto.subtle.digest("SHA-256",t)).then(function(e){return btoa(String.fromCharCode.apply(String,new Uint8Array(e))).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,"")})}catch(e){return Promise.reject(e)}},r.getState=function(){var e=this.getCookie("cloudhands_state");if(!e){e=this.generateRandomString(16,16);var t=new Date(Date.now()+3e5).toUTCString();document.cookie="cloudhands_state="+e+"; expires="+t+"; path=/"}return e},r.getCodeVerifier=function(){var e=this.getCookie("cloudhands_code_verifier");if(!e){e=this.generateRandomString(43,128);var t=new Date(Date.now()+3e5).toUTCString();document.cookie="cloudhands_code_verifier="+e+"; expires="+t+"; path=/"}return e},r.getCookie=function(e){var t=document.cookie.match(new RegExp("(?:^|; )"+e+"=([^;]*)"));return t?decodeURIComponent(t[1]):null},r.getAvatar=function(){return this.getCookie("cloudhands_avatar")||"https://cdn.cloudhands.ai/avatar/default.png"},r.getUsername=function(){return this.getCookie("cloudhands_username")||"Guest"},r.getAccessToken=function(){return this.getCookie("cloudhands_access_token")||null},r.logout=function(){["cloudhands_access_token","cloudhands_username","cloudhands_avatar","cloudhands_state","cloudhands_code_verifier"].forEach(function(e){document.cookie=e+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/"});var e=new URL(window.location.href);e.searchParams.delete("code"),e.searchParams.delete("state"),window.history.replaceState({},document.title,e.toString())},t}();e.CloudhandsButton=function(e,t,n){var r=document.createElement("div");r.style.display="flex",r.style.flexDirection="column",r.style.alignItems="flex-end",r.style.width="fit-content",r.style.fontFamily="Roboto, sans-serif";var o=document.createElement("button"),a=document.createElement("span");a.textContent="$"+t.charge,a.style.fontWeight="bold";var s=document.createElement("span");s.textContent=" / Generation",o.appendChild(a),o.appendChild(s),o.style.margin="0.5rem",o.style.padding="1rem 4rem",o.style.backgroundColor="hsla(280, 68%, 60%, 1)",o.style.color="white",o.style.border="none",o.style.fontSize="24px",o.style.alignItems="center",o.style.justifyContent="center",o.style.display="flex",o.style.gap="0.5rem",o.style.borderRadius="8px",o.style.width="fit-content";var i=function(){var e="http://www.w3.org/2000/svg",t=document.createElementNS(e,"svg");t.setAttribute("width","30"),t.setAttribute("height","30"),t.setAttribute("viewBox","0 0 800 800");var n=document.createElementNS(e,"rect");n.setAttribute("width","800.12"),n.setAttribute("height","800.12"),n.setAttribute("x","0.4"),n.setAttribute("y","0.26"),n.setAttribute("rx","96.52"),n.setAttribute("ry","96.52"),n.setAttribute("fill","hsla(280, 68%, 60%, 1)"),t.appendChild(n);var r=document.createElementNS(e,"path");r.setAttribute("d","M674.74 399.88s54.16 117.48 8.73 211.82H543.71s-1.75-89.1 61.14-132.77c62.89-43.67 69.88-79.05 69.88-79.05Z"),r.setAttribute("fill","#ffffff"),t.appendChild(r);var o=document.createElementNS(e,"path");o.setAttribute("d","M424.05 369.75s-.87-120.15 110.93-159.65c0 0 127.53-43.97 148.49-62.7 0 0 10.48 86.09-78.61 93.95 0 0 73.37 75.99 34.07 159.85-39.31 83.86-158.1 77.74-194.79 23.58 0 0-19.97-26.04-20.09-26.2-1.59-2.07 7.93-7.46 9.12-7.71 11.38-2.42 18.97 11.24 26 17.59 22.97 20.76 57.51 31.51 88.05 26.28 44.16-7.56 70.84-45.84 70.41-88.96-.41-41.36-25.05-72.95-63.67-86.96-90.69-32.9-129.9 110.93-129.9 110.93ZM399.09 369.75s.87-120.15-110.93-159.65c0 0-127.53-43.97-148.49-62.7 0 0-10.48 86.09 78.61 93.95 0 0-73.37 75.99-34.07 159.85 39.31 83.86 158.1 77.74 194.79 23.58 0 0 19.91-25.97 20.09-26.2 2.49-3.25-10.73-7.94-12.29-7.9-10.39.23-19.99 15.39-27.57 21.23-21.37 16.48-48.51 26.3-75.67 23.86-46.15-4.15-77.31-42.05-78.02-86.9-.68-42.54 23.81-75.6 63.66-90.05 90.69-32.9 129.9 110.93 129.9 110.93Z"),o.setAttribute("fill","#ffffff"),t.appendChild(o);var a=document.createElementNS(e,"path");a.setAttribute("d","M148.89 399.88s-54.16 117.48-8.73 211.82h139.76s1.75-89.1-61.14-132.77c-62.89-43.67-69.88-79.05-69.88-79.05Z"),a.setAttribute("fill","#ffffff"),t.appendChild(a);var s=document.createElementNS(e,"path");s.setAttribute("d","M411.82 147.42S345 145.7 272.93 178.46c0 0 91.28 24.46 138.89 94.34 47.61-69.88 138.89-94.34 138.89-94.34-72.06-32.76-138.89-31.04-138.89-31.04Z"),s.setAttribute("fill","#ffffff"),t.appendChild(s);var i=document.createElementNS(e,"circle");i.setAttribute("cx","522.31"),i.setAttribute("cy","346.16"),i.setAttribute("r","53.72"),i.setAttribute("fill","#2dd4e0"),t.appendChild(i);var c=document.createElementNS(e,"circle");c.setAttribute("cx","298.26"),c.setAttribute("cy","346.16"),c.setAttribute("r","53.72"),c.setAttribute("fill","#2dd4e0"),t.appendChild(c);var l=document.createElementNS(e,"path");return l.setAttribute("d","M410.25 372.31c-6.56.27-11.51.16-17.12 4.11-5.18 3.65-9.76 8.09-13.85 12.91-2.04 2.41-21 30.77-20.19 31.14 12.37 5.97 22.2 16.26 30.1 27.5 7.89 11.25 14.09 23.57 21.1 35.39 7.01-11.82 13.21-24.15 21.11-35.4 7.9-11.25 17.73-21.54 30.11-27.51-8.57-15.26-17.46-30.9-31.09-41.87-3.57-2.87-7.58-5.45-12.1-6.18-2.29-.37-4.64-.26-6.96-.15-.38.02-.74.03-1.11.05Z"),l.setAttribute("fill","#ffffff"),t.appendChild(l),t}();o.prepend(i);var c=document.createElement("div");c.style.display="flex",c.style.margin="0.5rem",c.style.alignItems="center",c.style.justifyContent="center",c.style.backgroundColor="#78788014",c.style.borderRadius="24px",c.style.width="fit-content",c.style.boxSizing="border-box",c.style.display="none";var l=document.createElement("img");l.src=e.getAvatar(),l.alt="Avatar",l.style.width="32px",l.style.height="32px",l.style.borderRadius="50%",l.style.marginRight="1rem",c.appendChild(l);var d=document.createElement("span");d.textContent=e.getUsername(),d.style.fontSize="20px",d.style.fontWeight="medium",d.style.marginRight="1rem",d.style.color="black",c.appendChild(d);var u=document.createElement("button");u.textContent="▼",u.style.background="none",u.style.border="none",u.style.cursor="pointer",u.style.fontSize="1rem",u.style.marginRight="0.5rem",u.style.color="black",c.appendChild(u);var h=document.createElement("div");h.style.position="absolute",h.style.backgroundColor="#ffffff",h.style.border="1px solid #ccc",h.style.borderRadius="8px",h.style.boxShadow="0 4px 6px rgba(0, 0, 0, 0.1)",h.style.padding="0.5rem",h.style.marginTop="0.5rem",h.style.display="none",h.style.zIndex="1000",h.style.top="100%",h.style.right="0",h.style.width="fit-content",h.style.boxSizing="border-box";var f=document.createElement("button");f.textContent="Logout",f.style.background="none",f.style.border="none",f.style.cursor="pointer",f.style.fontSize="1rem",f.style.color="red",f.style.padding="0.5rem 1rem",f.style.textAlign="left",f.style.width="100%",f.addEventListener("click",function(){e.logout(),c.style.display="none",location.reload()}),h.appendChild(f),c.style.position="relative",c.appendChild(h),u.addEventListener("click",function(){h.style.display="none"===h.style.display?"block":"none"}),document.addEventListener("click",function(e){c.contains(e.target)||(h.style.display="none")}),r.appendChild(o),r.appendChild(c);var m=document.createElement("span");return m.style.color="red",m.style.margin="0.5rem 0",m.style.fontSize="1rem",m.className="error-message",m.style.display="none",r.insertBefore(m,c),e.IsAuthenticated()&&(l.src=e.getAvatar(),d.textContent=e.getUsername(),c.style.display="flex"),o.addEventListener("click",function(){try{var o=function(){e.IsAuthenticated()&&(l.src=e.getAvatar(),d.textContent=e.getUsername(),c.style.display="flex",e.CloudhandsPurchase(t).then(function(e){e.success?(m.style.display="none",n(e)):(console.log(e),m.textContent=""+(e.message||"Unknown error"),m.style.display="block",r.insertBefore(m,c))}))},a=function(){if(!e.IsAuthenticated())return Promise.resolve(e.Authenticate()).then(function(){})}();return Promise.resolve(a&&a.then?a.then(o):o())}catch(e){return Promise.reject(e)}}),r},e.default=r});

static/style.css

@@ -0,0 +1,74 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #1e1e1e; /* dark grey */
+    font-family: Arial, sans-serif;
+    color: #ffffff;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container {
+    text-align: center;
+    width: 90%;
+    max-width: 500px;
+    padding: 1rem;
+}
+
+/* REMOVE max-width on mobile */
+@media (max-width: 500px) {
+    .container {
+        max-width: none;
+    }
+}
+
+.logo {
+    width: 100px;
+    margin-bottom: 1rem;
+    margin-top: 25px;
+}
+
+h1 {
+    margin-bottom: 2rem;
+    font-size: 2rem;
+    color: #ffffff;
+}
+
+#image-container img {
+    max-width: 100%;
+    border-radius: 10px;
+    margin-bottom: 2rem;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+    border: none;
+    border-radius: 5px;
+    font-size: 1rem;
+}
+
+#pay_button {
+    padding: 1rem 2rem;
+    font-size: 1.2rem;
+    background-color: #7c3aed; /* purple button */
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+#pay_button:hover {
+    background-color: #6d28d9;
+}
+
+.result-text {
+    margin-top: 1rem;
+    font-size: 1rem;
+    color: #ff6b6b;
+}

templates/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>FLUX Text to Image Generation</title>
+    <link rel="stylesheet" href="/static/style.css">
+    <script src="/static/cloudhands/index.umd.js"></script> <!-- Load UMD version -->
+</head>
+<body>
+
+<div class="container">
+    <img src="/static/cloudhands-logo.webp" alt="Cloudhands Logo" class="logo" />
+
+    <h1>FLUX Text to Image Generation</h1>
+
+    <div id="image-container" class="image-container"></div>
+
+    <input type="text" id="user_input" placeholder="Enter your prompt..." />
+
+    <button id="pay_button">Generate Image</button>
+
+    <div id="result" class="result-text"></div>
+</div>
+
+<script>
+    const cloudhandsSDK = new cloudhands.default('pK--Z2H4X7e1uqXgDqPx2rvq8iGBMkXR');
+
+    document.getElementById('pay_button').addEventListener('click', async () => {
+        const userInput = document.getElementById('user_input').value.trim();
+
+        if (!userInput) {
+            document.getElementById('result').innerText = "Please enter a prompt.";
+            return;
+        }
+
+        const chargeData = cloudhandsSDK.CreateCharge(
+            1,
+            'Image Generation',
+            cloudhands.ChargeType.Each,
+            { userInput: userInput }
+        );
+
+        if (!cloudhandsSDK.IsAuthenticated()) {
+            await cloudhandsSDK.Authenticate();
+        }
+
+        const paymentResult = await cloudhandsSDK.CloudhandsPurchase(chargeData);
+
+        if (paymentResult.success) {
+            document.getElementById('result').innerText = "Generating image...";
+            
+            const response = await fetch('/pay', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt: userInput })
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                document.getElementById('image-container').innerHTML = `
+                    <img src="${data.image_path}" alt="Generated Image" />
+                `;
+                document.getElementById('result').innerText = "";
+            } else {
+                document.getElementById('result').innerText = `Error generating image: ${data.error}`;
+            }
+        } else {
+            document.getElementById('result').innerText = `Payment failed: ${paymentResult.message}`;
+        }
+    });
+</script>
+
+</body>
+</html>