jebus/enviPy-bayer
1
0
Fork 0
forked from enviPath/enviPy
Code Issues Pull Requests Actions Releases Activity

Add better image

Browse Source
This commit is contained in:
Tobias O
2025-10-17 23:25:55 +13:00
parent 86c3f9b808
commit d98b60fc57
4 changed files with 134 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/images/hero.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 785 KiB

BIN
static/images/hero.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 307 KiB

2
templates/includes/navbar.html
View File

@ -3,7 +3,7 @@
<div class="navbar bg-neutral-50 text-neutral-950 shadow-lg">
<div class="navbar-start">
<a href="{{ meta.server_url }}" class="btn btn-ghost normal-case text-xl">
<img src='{% static "/images/logo-short-white.svg" %}' width="100" alt="enviPath">
<img src='{% static "/images/logo-short-white.svg" %}' width="100" class="fill-neutral-950" alt="enviPath">
</a>
</div>

100
templates/index/index.html
View File

@ -3,17 +3,18 @@
{% block main_content %}
<!-- Hero Section with Logo and Search -->
<section>
<div
class="hero min-h-screen w-full mx-auto"
style="background-image: url('{% static "/images/hero.jpg" %}'); background-size: cover; background-position: center;">
<section class="hero min-h-[calc(100vh*0.7)] w-full shadow-none"
style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;">
<div class="hero-content flex-col lg:flex-row-reverse w-full">
<div class="card bg-base-100 shrink-0 shadow-2xl p-8 w-1/2">
<div class="hero-overlay blur-xs"></div>
<div class="hero-content flex-col lg:flex-row-reverse w-full h-fit">
<div class="card bg-base-100 shrink-0 shadow-2xl p-8 w-3/4">
<div class="card-body">
<fieldset class="fieldset">
<label class="toggle text-base-content toggle-xl justify-self-end mb-6">
<div class="flex flex-row justify-between items-center h-fit">
<h2 class="card-title text-xl text-neutral-600">Predict Pathway</h2>
<label class="toggle text-base-content toggle-xl justify-self-end mb-6 align-baseline">
<input type="checkbox" />
<svg aria-label="smiles mode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="size-5">
<g
@ -38,9 +39,10 @@
</svg>
</label>
</div>
<form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
{% csrf_token %}
<div id="text-input-container" class="transition-all duration-300 ease-in-out opacity-100 transform scale-100">
<div class="join w-full mx-auto">
<input type="text" id="index-form-text-input" placeholder="cannonical SMILES string" class="input grow input-lg join-item" />
<button class="btn btn-lg bg-primary-950 text-primary-50 join-item">Predict!</button>
@ -50,6 +52,12 @@
<a href="#">Example 2</a>
<a class="ml-auto w-[9em]" href="#">Advanced </a> <!-- TODO: positioning a bit sloppy. Better reference button? -->
</div>
</div>
<div id="ketcher-container" class="hidden w-full transition-all duration-300 ease-in-out opacity-0 transform scale-95">
<iframe id="index-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}"
width="100%" height="510"></iframe>
<button class="btn btn-lg bg-primary-950 text-primary-50 join-item w-full mt-2">Predict!</button>
</div>
<input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
<input type="hidden" id="index-form-predict" name="predict" value="predict">
<input type="hidden" id="current-action" value="predict">
@ -66,7 +74,6 @@
</div>
</div>
</div>
</div>
</section>
<!-- Community News Section -->
@ -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;