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

Compare commits

merge into: jebus:feat/package_pred
Branches Tags
jebus:develop jebus:fix/ketcher_submission jebus:fix/issue204 jebus:hotfix/login jebus:refactor/html_formatting jebus:fix/missing_nav_links jebus:feat/package_pred jebus:fix/frontpage_predict jebus:fix/search jebus:feature/leftovers jebus:enhancement/licenses jebus:feature/frontend_update jebus:fix/xss jebus:enhancement/dataset jebus:feature/engineered_pathways jebus:feature/tenants jebus:feature/manager_tests jebus:feature/normalization_rules jebus:main
jebus:beta_2025-11-12 jebus:pre_frontpage_update jebus:beta_2025-10-15 jebus:beta_2025-09-18 jebus:beta_2025-09-04 jebus:beta_2025-09-02 jebus:beta_2025-08-25 jebus:beta_#1
...
pull from: jebus:fix/frontpage_predict
Branches Tags
jebus:develop jebus:fix/ketcher_submission jebus:fix/issue204 jebus:hotfix/login jebus:refactor/html_formatting jebus:fix/missing_nav_links jebus:feat/package_pred jebus:fix/frontpage_predict jebus:fix/search jebus:feature/leftovers jebus:enhancement/licenses jebus:feature/frontend_update jebus:fix/xss jebus:enhancement/dataset jebus:feature/engineered_pathways jebus:feature/tenants jebus:feature/manager_tests jebus:feature/normalization_rules jebus:main
jebus:beta_2025-11-12 jebus:pre_frontpage_update jebus:beta_2025-10-15 jebus:beta_2025-09-18 jebus:beta_2025-09-04 jebus:beta_2025-09-02 jebus:beta_2025-08-25 jebus:beta_#1

4 Commits
feat/packa ... fix/frontp

Author SHA1 Message Date
jebus
d12b908014 Merge branch 'develop' into fix/frontpage_predict 2025-11-12 20:54:27 +13:00
Tobias O
25c10bbf77 refactor: add tooltip 2025-11-12 16:24:35 +13:00
Tobias O
c1ca734e81 refactor: change input toggle style 2025-11-12 16:22:02 +13:00
Tobias O
e5d2bc596b refactor: move Advanced to right 2025-11-12 16:01:31 +13:00
1 changed files with 81 additions and 67 deletions
Expand all files Collapse all files

148
templates/index/index.html
View File

@ -2,74 +2,86 @@
{% load static %} {% load static %}
{% block main_content %} {% block main_content %}
<!-- Hero Section with Logo and Search --> <!-- Hero Section with Logo and Search -->
<section class="hero h-fit max-w-5xl w-full shadow-none mx-auto relative"> <section class="hero relative mx-auto h-fit w-full max-w-5xl shadow-none">
<div <div
class="hero min-h-[calc(100vh*0.4)] bg-gradient-to-br from-primary-800 to-primary-600" class="hero from-primary-800 to-primary-600 min-h-[calc(100vh*0.4)] bg-gradient-to-br"
style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;" style="background-image: url('{% static "/images/hero.png" %}'); background-size: cover; background-position: center;"
> >
<div class="hero-overlay"></div> <div class="hero-overlay"></div>
<!-- Predict Pathway text over the image --> <!-- Predict Pathway text over the image -->
<div class="absolute bottom-40 left-1/8 -translate-x-8 z-10"> <div class="absolute bottom-40 left-1/8 z-10 -translate-x-8">
<h2 class="text-3xl text-base-100 text-shadow-lg text-left"> <h2 class="text-base-100 text-left text-3xl text-shadow-lg">
Predict Your Pathway Predict Your Pathway
</h2> </h2>
</div> </div>
</div> </div>
</section> </section>
<div class="shadow-md max-w-5xl mx-auto bg-base-200"> <div class="bg-base-200 mx-auto max-w-5xl shadow-md">
<!-- Predict Pathway Section --> <!-- Predict Pathway Section -->
<div <div
class="flex-col lg:flex-row-reverse w-full mx-auto -mt-32 relative z-20 mb-10 " class="relative z-20 mx-auto -mt-32 mb-10 w-full flex-col lg:flex-row-reverse"
> >
<div <div
class="card bg-base-100 shrink-0 shadow-xl w-3/4 mx-auto transition-all duration-300 ease-in-out" class="card bg-base-100 mx-auto w-3/4 shrink-0 shadow-xl transition-all duration-300 ease-in-out"
> >
<div class="card-body"> <div class="card-body">
<!-- Input Mode Toggle - Fixed position outside fieldset --> <div class="my-4 ml-8 flex h-fit flex-row items-center justify-start">
<div class="flex flex-row justify-start items-center h-fit ml-8 my-4"> <div class="flex items-center gap-1">
<div class="flex items-center gap-2"> <label class="swap btn btn-ghost btn-sm p-1" title="Input Mode">
<!-- <span class="text-sm text-neutral-500">Input Mode:</span> -->
<label class="toggle text-base-content toggle-md">
<input type="checkbox" /> <input type="checkbox" />
<svg <span class="swap-on flex items-center gap-1">
aria-label="smiles mode" <div
xmlns="http://www.w3.org/2000/svg" class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1"
viewBox="0 0 20 20"
class="size-5"
>
<g
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
fill="currentColor"
stroke="none"
> >
<path <svg
fill-rule="evenodd" aria-label="smiles mode"
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" xmlns="http://www.w3.org/2000/svg"
clip-rule="evenodd" viewBox="0 0 20 20"
/> class="size-5"
</g> >
</svg> <g
<svg stroke-linejoin="round"
aria-label="draw mode" stroke-linecap="round"
xmlns="http://www.w3.org/2000/svg" stroke-width="2"
viewBox="0 0 20 20" fill="currentColor"
fill="currentColor" stroke="none"
stroke="none" >
class="size-5" <path
> fill-rule="evenodd"
<path 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"
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" clip-rule="evenodd"
/> />
</svg> </g>
</svg>
</div>
<span class="ext-xs">SMILES</span>
</span>
<span class="swap-off flex items-center gap-1">
<div
class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1"
>
<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>
</div>
<span class="text-base/50 text-xs">Draw</span>
</span>
</label> </label>
</div> </div>
</div> </div>
<fieldset <fieldset
class="fieldset transition-all duration-300 ease-in-out overflow-hidden" class="fieldset overflow-hidden transition-all duration-300 ease-in-out"
> >
<form <form
id="index-form" id="index-form"
@ -79,29 +91,29 @@
{% csrf_token %} {% csrf_token %}
<div <div
id="text-input-container" id="text-input-container"
class="transition-all duration-300 ease-in-out opacity-100 transform scale-100" class="scale-100 transform opacity-100 transition-all duration-300 ease-in-out"
> >
<div class="join w-full mx-auto"> <div class="join mx-auto w-full">
<input <input
type="text" type="text"
id="index-form-text-input" id="index-form-text-input"
placeholder="canonical SMILES string" placeholder="canonical SMILES string"
class="input grow input-md join-item" class="input input-md join-item grow"
/> />
<button class="btn btn-neutral join-item">Predict!</button> <button class="btn btn-neutral join-item">Predict!</button>
</div> </div>
<div class="label relative w-full mt-1"> <div class="label relative mt-1 w-full">
<div class="flex gap-2"> <div class="flex gap-2">
<a <a
href="#" href="#"
class="example-link cursor-pointer hover:text-primary" class="example-link hover:text-primary cursor-pointer"
data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C" data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"
title="load example" title="load example"
>Caffeine</a >Caffeine</a
> >
<a <a
href="#" href="#"
class="example-link cursor-pointer hover:text-primary" class="example-link hover:text-primary cursor-pointer"
data-smiles="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O" data-smiles="CC(C)CC1=CC=C(C=C1)C(C)C(=O)O"
title="load example" title="load example"
>Ibuprofen</a >Ibuprofen</a
@ -114,7 +126,7 @@
</div> </div>
<div <div
id="ketcher-container" id="ketcher-container"
class="hidden w-full transition-all duration-300 ease-in-out opacity-0 transform scale-95" class="hidden w-full scale-95 transform opacity-0 transition-all duration-300 ease-in-out"
> >
<iframe <iframe
id="index-ketcher" id="index-ketcher"
@ -124,11 +136,13 @@
class="rounded-lg" class="rounded-lg"
></iframe> ></iframe>
<button <button
class="btn btn-lg bg-primary-950 text-primary-50 join-item w-full mt-2" class="btn btn-lg bg-primary-950 text-primary-50 join-item mt-2 w-full"
> >
Predict! Predict!
</button> </button>
<a class="label mx-auto w-full mt-1" href="#">Advanced</a> <div class="mt-1 flex w-full justify-end">
<a class="label justify-end" href="/predict">Advanced</a>
</div>
</div> </div>
<input <input
type="hidden" type="hidden"
@ -150,18 +164,18 @@
</div> </div>
<!-- Community News Section --> <!-- Community News Section -->
<section class="py-16 bg-base-200 z-10 mx-8"> <section class="bg-base-200 z-10 mx-8 py-16">
<div class="max-w-7xl mx-auto px-4"> <div class="mx-auto max-w-7xl px-4">
<h2 class="h2 font-bold text-left mb-8">Community Updates</h2> <h2 class="h2 mb-8 text-left font-bold">Community Updates</h2>
<div id="community-news-container" class="flex gap-4 justify-center"> <div id="community-news-container" class="flex justify-center gap-4">
<!-- News cards will be populated here --> <!-- News cards will be populated here -->
<div id="loading" class="flex justify-center w-full"> <div id="loading" class="flex w-full justify-center">
<span class="loading loading-spinner loading-lg"></span> <span class="loading loading-spinner loading-lg"></span>
</div> </div>
</div> </div>
<div class="text-right mt-6"> <div class="mt-6 text-right">
<a <a
href="https://community.envipath.org/c/announcements/10" href="https://community.envipath.org/c/announcements/10"
target="_blank" target="_blank"
@ -177,18 +191,18 @@
</section> </section>
<!-- Mission Statement Section --> <!-- Mission Statement Section -->
<section class="py-16 from-base-200 to-base-100 bg-gradient-to-b"> <section class="from-base-200 to-base-100 bg-gradient-to-b py-16">
<div class="mx-auto px-8 md:px-12"> <div class="mx-auto px-8 md:px-12">
<div class="flex flex-row gap-4"> <div class="flex flex-row gap-4">
<div class="w-1/3"> <div class="w-1/3">
<img <img
src="{% static "/images/ep-rule-artwork.png" %}" src="{% static "/images/ep-rule-artwork.png" %}"
alt="rule-based iterative tree greneration" alt="rule-based iterative tree greneration"
class="w-full h-full object-contain" class="h-full w-full object-contain"
/> />
</div> </div>
<div class="space-y-4 text-left w-2/3 mr-8"> <div class="mr-8 w-2/3 space-y-4 text-left">
<h2 class="h2 font-bold mb-8">About enviPath</h2> <h2 class="h2 mb-8 font-bold">About enviPath</h2>
<p class=""> <p class="">
enviPath is a database and prediction system for the microbial enviPath is a database and prediction system for the microbial
biotransformation of organic environmental contaminants. The biotransformation of organic environmental contaminants. The
@ -201,7 +215,7 @@
products. Explore our tools and contribute to advancing products. Explore our tools and contribute to advancing
environmental biotransformation research. environmental biotransformation research.
</p> </p>
<div class="flex flex-row gap-4 float-right"> <div class="float-right flex flex-row gap-4">
<a href="/about" class="btn btn-ghost-neutral">Read More</a> <a href="/about" class="btn btn-ghost-neutral">Read More</a>
<a href="/about" class="btn btn-neutral">Publications</a> <a href="/about" class="btn btn-neutral">Publications</a>
</div> </div>
@ -211,7 +225,7 @@
</section> </section>
<!-- Partners Section --> <!-- Partners Section -->
<section class="py-14 sm:py-12 bg-base-100"> <section class="bg-base-100 py-14 sm:py-12">
<div class="mx-auto px-6 lg:px-8"> <div class="mx-auto px-6 lg:px-8">
<div class="divider"> <div class="divider">
<h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2> <h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2>
@ -222,12 +236,12 @@
<img <img
src="{% static "/images/uoa-logo-small.png" %}" src="{% static "/images/uoa-logo-small.png" %}"
alt="The University of Auckland" alt="The University of Auckland"
class=" max-h-20 w-full object-contain lg:col-span-1" class="max-h-20 w-full object-contain lg:col-span-1"
/> />
<img <img
src="{% static "/images/logo-eawag.svg" %}" src="{% static "/images/logo-eawag.svg" %}"
alt="Eawag" alt="Eawag"
class=" max-h-12 w-full object-contain lg:col-span-1" class="max-h-12 w-full object-contain lg:col-span-1"
/> />
<img <img
src="{% static "/images/uzh-logo.svg" %}" src="{% static "/images/uzh-logo.svg" %}"