Add project idea section

public/bin/landing-new/gambling.js

@@ -141,4 +141,17 @@ window.addEventListener("load", (e) => {
         })
         saveImageToCache({ wokwiName: "wokwi-pedro", imageUrl: "https://awdev.codes/images/ww.gif" })
     });
+
+    document.querySelector("#generate-project-idea").addEventListener("click", async (e) => {
+        document.querySelector('#project-idea').innerText = "Thinking..."
+        const res = await fetch('/api/bin/openai/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ parts: selectedParts })
+        })
+        const json = await res.json()
+        document.querySelector('#project-idea').innerText = json.recommendation
+    })
 })

public/bin/landing-new/index.html

@@ -62,8 +62,24 @@
         <div class="gambling-controls">
             <button onclick="rollParts()" class="gambling-roll hoverable">Roll!</button>
             <span class="flex-lb"></span>
-            <button onclick="location.href='../selector/index.html'" class="gambling-select hoverable">Manual Selection</button>
-            <button onclick="generateBuildLink(this)" class="gambling-build hoverable disabled">Continue<img src="../icons/arrow.svg"></button>
+            <button onclick="location.href='../selector/index.html'" class="gambling-select hoverable">Manual
+                Selection</button>
+            <button onclick="generateBuildLink(this)" class="gambling-build hoverable disabled">Continue<img
+                    src="../icons/arrow.svg"></button>
+        </div>
+    </section>
+    <section class="project-idea-section section">
+        <div class="container">
+            <h1>What are we building today?</h1>
+            <textarea id="project-name" placeholder="I'm going to build a..."></textarea>
+            <h2>💡 Need an idea? Click the raccoon!</h2>
+            <div style="display: flex;">
+                <div>
+                    <img src="../images/idea.png" style="margin: 0 auto; display: inline; max-width: 10em" id="generate-project-idea">
+                    <p><em>(It doesn't know much about electronics, but it'll try its best.)</em></p>
+                </div>
+                <p id="project-idea">🗑️</p>
+            </div>
         </div>
     </section>
     <footer>

public/bin/landing-new/style.css

@@ -4,6 +4,12 @@
     box-sizing: border-box;
 }
 
+.container {
+    margin: auto;
+    padding: 0 20px;
+    max-width: 52em;
+}
+
 .hoverable {
     transition: 500ms transform;
 }
@@ -352,4 +358,8 @@
 
 .loading {
     cursor: wait !important;
+}
+
+#generate-project-idea {
+    cursor: pointer;
 }