forked from enviPath/enviPy
refactor: large scale formatting/linting
This commit is contained in:
@ -2,32 +2,32 @@
|
||||
{% load static %}
|
||||
{% block main_content %}
|
||||
<!-- 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
|
||||
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;"
|
||||
>
|
||||
<div class="hero-overlay"></div>
|
||||
<!-- Predict Pathway text over the image -->
|
||||
<div class="absolute bottom-40 left-1/8 -translate-x-8 z-10">
|
||||
<h2 class="text-3xl text-base-100 text-shadow-lg text-left">
|
||||
<div class="absolute bottom-40 left-1/8 z-10 -translate-x-8">
|
||||
<h2 class="text-base-100 text-left text-3xl text-shadow-lg">
|
||||
Predict Your Pathway
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</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 -->
|
||||
<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
|
||||
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">
|
||||
<!-- Input Mode Toggle - Fixed position outside fieldset -->
|
||||
<div class="flex flex-row justify-start items-center h-fit ml-8 my-4">
|
||||
<div class="my-4 ml-8 flex h-fit flex-row items-center justify-start">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- <span class="text-sm text-neutral-500">Input Mode:</span> -->
|
||||
<label class="toggle text-base-content toggle-md">
|
||||
@ -69,7 +69,7 @@
|
||||
</div>
|
||||
|
||||
<fieldset
|
||||
class="fieldset transition-all duration-300 ease-in-out overflow-hidden"
|
||||
class="fieldset overflow-hidden transition-all duration-300 ease-in-out"
|
||||
>
|
||||
<form
|
||||
id="index-form"
|
||||
@ -79,29 +79,29 @@
|
||||
{% csrf_token %}
|
||||
<div
|
||||
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
|
||||
type="text"
|
||||
id="index-form-text-input"
|
||||
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>
|
||||
</div>
|
||||
<div class="label relative w-full mt-1">
|
||||
<div class="label relative mt-1 w-full">
|
||||
<div class="flex gap-2">
|
||||
<a
|
||||
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"
|
||||
title="load example"
|
||||
>Caffeine</a
|
||||
>
|
||||
<a
|
||||
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"
|
||||
title="load example"
|
||||
>Ibuprofen</a
|
||||
@ -114,7 +114,7 @@
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
id="index-ketcher"
|
||||
@ -124,11 +124,11 @@
|
||||
class="rounded-lg"
|
||||
></iframe>
|
||||
<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!
|
||||
</button>
|
||||
<a class="label mx-auto w-full mt-1" href="#">Advanced</a>
|
||||
<a class="label mx-auto mt-1 w-full" href="#">Advanced</a>
|
||||
</div>
|
||||
<input
|
||||
type="hidden"
|
||||
@ -150,18 +150,18 @@
|
||||
</div>
|
||||
|
||||
<!-- Community News Section -->
|
||||
<section class="py-16 bg-base-200 z-10 mx-8">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<h2 class="h2 font-bold text-left mb-8">Community Updates</h2>
|
||||
<section class="bg-base-200 z-10 mx-8 py-16">
|
||||
<div class="mx-auto max-w-7xl px-4">
|
||||
<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 -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-right mt-6">
|
||||
<div class="mt-6 text-right">
|
||||
<a
|
||||
href="https://community.envipath.org/c/announcements/10"
|
||||
target="_blank"
|
||||
@ -177,18 +177,18 @@
|
||||
</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="flex flex-row gap-4">
|
||||
<div class="w-1/3">
|
||||
<img
|
||||
src="{% static "/images/ep-rule-artwork.png" %}"
|
||||
alt="rule-based iterative tree greneration"
|
||||
class="w-full h-full object-contain"
|
||||
class="h-full w-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-4 text-left w-2/3 mr-8">
|
||||
<h2 class="h2 font-bold mb-8">About enviPath</h2>
|
||||
<div class="mr-8 w-2/3 space-y-4 text-left">
|
||||
<h2 class="h2 mb-8 font-bold">About enviPath</h2>
|
||||
<p class="">
|
||||
enviPath is a database and prediction system for the microbial
|
||||
biotransformation of organic environmental contaminants. The
|
||||
@ -201,7 +201,7 @@
|
||||
products. Explore our tools and contribute to advancing
|
||||
environmental biotransformation research.
|
||||
</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-neutral">Publications</a>
|
||||
</div>
|
||||
@ -211,7 +211,7 @@
|
||||
</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="divider">
|
||||
<h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2>
|
||||
@ -222,12 +222,12 @@
|
||||
<img
|
||||
src="{% static "/images/uoa-logo-small.png" %}"
|
||||
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
|
||||
src="{% static "/images/logo-eawag.svg" %}"
|
||||
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
|
||||
src="{% static "/images/uzh-logo.svg" %}"
|
||||
|
||||
Reference in New Issue
Block a user