True palette AI integration

ported over the AI art to the true palette page

.idea/config/applicationhost.config

@@ -156,7 +156,7 @@
       <virtualDirectoryDefaults allowSubDirConfig="true" />
       <site name="CI-ColorWebs" id="1">
         <application path="/" applicationPool="CI-ColorWebs AppPool">
-          <virtualDirectory path="/" physicalPath="C:\Users\aidan\Documents\GitHub\color-website2\CI-ColorWebs" />
+          <virtualDirectory path="/" physicalPath="C:\Users\aidan\OneDrive\Documents\GitHub\color-website2\CI-ColorWebs" />
         </application>
         <bindings>
           <binding protocol="http" bindingInformation="*:23781:localhost" />

CI-ColorWebs/Pages/TruePalette.cshtml

@@ -23,5 +23,12 @@
         <span id="palColor6"></span>
         <canvas width = "700"></canvas>
     </h2>
+    <h3>
+        <p>View your pallete visualized through AI art:</p>
+        <span id="Tlinkai"></span>
+        </h3>
+    <h8>
+        <p>(Keep in mind AI art is not perfect and it may take a couple of tries before you get a result you like)</p>
+        </h8>
 </div>
 <script src = './js/truepalette.js'></script>

CI-ColorWebs/wwwroot/js/truepalette.js

@@ -90,6 +90,9 @@ const bre = () => {
     context.fillStyle = leColor[5];
     context.fillRect(580, 0, 116, 150);
     document.getElementById("palColor6").style.color = leColor[5];
+    Tailink = "?prompt=flower%20color(" + leColor[0].replace(/^#+/, '')+",%20" + leColor[1].replace(/^#+/, '')+ ",%20"+ leColor[2].replace(/^#+/, '')+ ",%20"+ leColor[3].replace(/^#+/, '')+ ",%20"+ leColor[4].replace(/^#+/, '')+ ",%20"+ leColor[5].replace(/^#+/, '')+ ")%20painting";
+    var Tlink = "<a href='https://www.craiyon.com/" + Tailink + "' target='_blank'>here</a>";
+    document.getElementById("Tlinkai").innerHTML=Tlink;
 }
 
 document.getElementById("gsetNew").addEventListener("click", bre);