forked from enviPath/enviPy
Add better image
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 785 KiB |
BIN
static/images/hero.png
Normal file
BIN
static/images/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
@ -3,7 +3,7 @@
|
|||||||
<div class="navbar bg-neutral-50 text-neutral-950 shadow-lg">
|
<div class="navbar bg-neutral-50 text-neutral-950 shadow-lg">
|
||||||
<div class="navbar-start">
|
<div class="navbar-start">
|
||||||
<a href="{{ meta.server_url }}" class="btn btn-ghost normal-case text-xl">
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -3,68 +3,75 @@
|
|||||||
{% block main_content %}
|
{% block main_content %}
|
||||||
|
|
||||||
<!-- Hero Section with Logo and Search -->
|
<!-- Hero Section with Logo and Search -->
|
||||||
<section>
|
<section class="hero min-h-[calc(100vh*0.7)] w-full shadow-none"
|
||||||
<div
|
style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;">
|
||||||
class="hero min-h-screen w-full mx-auto"
|
|
||||||
style="background-image: url('{% static "/images/hero.jpg" %}'); background-size: cover; background-position: center;">
|
|
||||||
|
|
||||||
<div class="hero-content flex-col lg:flex-row-reverse w-full">
|
<div class="hero-overlay blur-xs"></div>
|
||||||
<div class="card bg-base-100 shrink-0 shadow-2xl p-8 w-1/2">
|
|
||||||
|
<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">
|
<div class="card-body">
|
||||||
<fieldset class="fieldset">
|
<fieldset class="fieldset">
|
||||||
|
<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
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="2"
|
||||||
|
fill="currentColor"
|
||||||
|
stroke="none"
|
||||||
|
>
|
||||||
|
<path fill-rule="evenodd" d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z" clip-rule="evenodd" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-label="draw mode"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
stroke="none"
|
||||||
|
class="size-5"
|
||||||
|
>
|
||||||
|
<path d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z" />
|
||||||
|
|
||||||
<label class="toggle text-base-content toggle-xl justify-self-end mb-6">
|
</svg>
|
||||||
<input type="checkbox" />
|
</label>
|
||||||
<svg aria-label="smiles mode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="size-5">
|
|
||||||
<g
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-width="2"
|
|
||||||
fill="currentColor"
|
|
||||||
stroke="none"
|
|
||||||
>
|
|
||||||
<path fill-rule="evenodd" d="M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z" clip-rule="evenodd" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<svg
|
|
||||||
aria-label="draw mode"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
stroke="none"
|
|
||||||
class="size-5"
|
|
||||||
>
|
|
||||||
<path d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z" />
|
|
||||||
|
|
||||||
</svg>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
|
|
||||||
{% csrf_token %}
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="label flex flex-row gap-2 w-full mt-1" >
|
<form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
|
||||||
<a href="#">Example 1</a>
|
{% csrf_token %}
|
||||||
<a href="#">Example 2</a>
|
<div id="text-input-container" class="transition-all duration-300 ease-in-out opacity-100 transform scale-100">
|
||||||
<a class="ml-auto w-[9em]" href="#">Advanced </a> <!-- TODO: positioning a bit sloppy. Better reference button? -->
|
<div class="join w-full mx-auto">
|
||||||
</div>
|
<input type="text" id="index-form-text-input" placeholder="cannonical SMILES string" class="input grow input-lg join-item" />
|
||||||
<input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
|
<button class="btn btn-lg bg-primary-950 text-primary-50 join-item">Predict!</button>
|
||||||
<input type="hidden" id="index-form-predict" name="predict" value="predict">
|
</div>
|
||||||
<input type="hidden" id="current-action" value="predict">
|
<div class="label flex flex-row gap-2 w-full mt-1" >
|
||||||
</form>
|
<a href="#">Example 1</a>
|
||||||
</fieldset>
|
<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">
|
||||||
|
</form>
|
||||||
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="hero-overlay"></div>
|
<div class="hero-overlay"></div>
|
||||||
<div class="hero-content text-neutral-content text-center">
|
<div class="hero-content text-neutral-content text-center">
|
||||||
<div class="max-w-md">
|
<div class="max-w-md">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -163,12 +170,83 @@
|
|||||||
}, 500);
|
}, 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 () {
|
$(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
|
// Handle form submission on Enter
|
||||||
$('#index-form').on("submit", function (e) {
|
$('#index-form').on("submit", function (e) {
|
||||||
e.preventDefault();
|
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 === '') {
|
if (textSmiles === '') {
|
||||||
return;
|
return;
|
||||||
|
|||||||
Reference in New Issue
Block a user