diff --git a/static/images/hero.jpg b/static/images/hero.jpg deleted file mode 100644 index e363827d..00000000 Binary files a/static/images/hero.jpg and /dev/null differ diff --git a/static/images/hero.png b/static/images/hero.png new file mode 100644 index 00000000..7415db39 Binary files /dev/null and b/static/images/hero.png differ diff --git a/templates/includes/navbar.html b/templates/includes/navbar.html index be90915d..9c9795b8 100644 --- a/templates/includes/navbar.html +++ b/templates/includes/navbar.html @@ -3,7 +3,7 @@
- enviPath + enviPath
diff --git a/templates/index/index.html b/templates/index/index.html index acc26269..5120d542 100644 --- a/templates/index/index.html +++ b/templates/index/index.html @@ -3,68 +3,75 @@ {% block main_content %} -
-
+
-
-
+
+ +
+
-
+
+
+

Predict Pathway

+
+
+ {% csrf_token %} +
+
+ + +
+
+ Example 1 + Example 2 + Advanced +
+
+ + + + +
+
-
+
-
-
-
+
+
+
-
-
+
@@ -163,12 +170,83 @@ }, 500); } + // Toggle functionality with smooth animations + function toggleInputMode() { + const toggle = $('input[type="checkbox"]'); + const textContainer = $('#text-input-container'); + const ketcherContainer = $('#ketcher-container'); + + if (toggle.is(':checked')) { + // Draw mode - show Ketcher, hide text input + textContainer.addClass('hidden opacity-0 transform scale-95'); + textContainer.removeClass('opacity-100 transform scale-100'); + + // Small delay to allow text container to fade out first + setTimeout(() => { + ketcherContainer.removeClass('hidden opacity-0 transform scale-95'); + ketcherContainer.addClass('opacity-100 transform scale-100'); + }, 150); + } else { + // SMILES mode - show text input, hide Ketcher + ketcherContainer.addClass('opacity-0 transform scale-95'); + ketcherContainer.removeClass('opacity-100 transform scale-100'); + + // Small delay to allow ketcher container to fade out first + setTimeout(() => { + textContainer.removeClass('hidden opacity-0 transform scale-95'); + textContainer.addClass('opacity-100 transform scale-100'); + }, 150); + + // Transfer SMILES from Ketcher to text input if available + if (window.indexKetcher && window.indexKetcher.getSmiles) { + const smiles = window.indexKetcher.getSmiles(); + if (smiles && smiles.trim() !== '') { + $('#index-form-text-input').val(smiles); + } + } + } + } + + // Ketcher integration + function indexKetcherToTextInput() { + $('#index-form-smiles').val(this.ketcher.getSmiles()); + } + $(function () { + // Toggle event listener + $('input[type="checkbox"]').on('change', toggleInputMode); + + // Ketcher iframe load handler + $('#index-ketcher').on('load', function() { + const checkKetcherReady = () => { + const win = this.contentWindow; + if (win.ketcher && 'editor' in win.ketcher) { + window.indexKetcher = win.ketcher; + win.ketcher.editor.event.change.handlers.push({ + once: false, + priority: 0, + f: indexKetcherToTextInput, + ketcher: win.ketcher + }); + } else { + setTimeout(checkKetcherReady, 100); + } + }; + checkKetcherReady(); + }); + // Handle form submission on Enter $('#index-form').on("submit", function (e) { e.preventDefault(); - var textSmiles = $('#index-form-text-input').val().trim(); + var textSmiles = ''; + + // Check if we're in Ketcher mode and extract SMILES + if ($('input[type="checkbox"]').is(':checked') && window.indexKetcher) { + textSmiles = window.indexKetcher.getSmiles().trim(); + } else { + textSmiles = $('#index-form-text-input').val().trim(); + } if (textSmiles === '') { return;