chore: add example input to search

templates/index/index.html

@@ -64,8 +64,12 @@
                                 </div>
                                 <div class="label relative w-full mt-1" >
                                     <div class="flex gap-2">
-                                        <a href="#">Example 1</a>
+                                        <a href="#" class="example-link cursor-pointer hover:text-primary"
-                                        <a href="#">Example 2</a>
+                                           data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
+                                           title="load example">Caffeine</a>
+                                        <a href="#" class="example-link cursor-pointer hover:text-primary"
+                                           data-smiles="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O"
+                                           title="load example">Ibuprofen</a>
                                     </div>
                                     <a class="absolute top-0 left-[calc(100%-5.4rem)]" href="#">Advanced</a>
                                 </div>
@@ -118,7 +122,6 @@
                 </div>
                 <div class="space-y-4 text-left w-2/3 mr-8">
                     <h2 class="h2 font-bold mb-8">About enviPath</h2>
-
                     <p class="">
                         enviPath is a database and prediction system for the microbial
                         biotransformation of organic environmental contaminants. The
@@ -301,6 +304,31 @@
                 checkKetcherReady();
             });
 
+            // Handle example link clicks
+            $('.example-link').on('click', function(e) {
+                e.preventDefault();
+                const smiles = $(this).data('smiles');
+                const title = $(this).attr('title');
+
+                // Check if we're in Ketcher mode or text input mode
+                if ($('input[type="checkbox"]').is(':checked')) {
+                    // In Ketcher mode - set the SMILES in Ketcher
+                    if (window.indexKetcher && window.indexKetcher.setMolecule) {
+                        window.indexKetcher.setMolecule(smiles);
+                    }
+                } else {
+                    // In text input mode - set the SMILES in the text input
+                    $('#index-form-text-input').val(smiles);
+                }
+
+                // Show a brief feedback
+                const originalText = $(this).text();
+                $(this).text(`loaded!`);
+                setTimeout(() => {
+                    $(this).text(originalText);
+                }, 1000);
+            });
+
             // Handle form submission on Enter
             $('#index-form').on("submit", function (e) {
                 e.preventDefault();