forked from enviPath/enviPy
Add basic index redesign
This commit is contained in:
@ -1,74 +1,75 @@
|
||||
{% extends "framework_modern.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
<!-- Modal for Found Matching Pathways - TODO: Convert to DaisyUI modal -->
|
||||
<div class="modal fade" tabindex="-1" id="foundMatching" role="dialog" aria-labelledby="foundModal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title" id="newPackMod">Found Pathway in Database</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>We found at least one pathway in the database with the given root
|
||||
compound. Do you want to open any of the existing pathways or
|
||||
predict a new one? To open an existing pathway, simply click
|
||||
on the pathway, to predict a new one, click Predict. The predicted
|
||||
pathway might differ from the ones in the database due to the
|
||||
settings used in the prediction.</p>
|
||||
<div id="foundPathways"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="modal-predict" class="btn btn-primary" href="#">Predict</a>
|
||||
<button type="button" id="cancel-predict" class="btn btn-default" data-dismiss="modal">Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% block main_content %}
|
||||
|
||||
<!-- Hero Section with Logo and Search -->
|
||||
<section class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden">
|
||||
<!-- Blurred Background -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-teal-50 backdrop-blur-3xl"></div>
|
||||
<section>
|
||||
<div
|
||||
class="hero min-h-screen w-full mx-auto"
|
||||
>
|
||||
|
||||
<!-- Logo - Full width, centered -->
|
||||
<div class="relative z-10 w-full max-w-5xl px-4 mb-12 text-center">
|
||||
<img id="image-logo-long"
|
||||
class="w-full h-auto"
|
||||
alt="enviPath"
|
||||
src='{% static "/images/logo-long.svg" %}'/>
|
||||
</div>
|
||||
<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="card-body">
|
||||
<fieldset class="fieldset">
|
||||
|
||||
<!-- Search Component - Center of Hero -->
|
||||
<div class="relative z-10 w-full max-w-4xl px-4">
|
||||
<form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
|
||||
{% csrf_token %}
|
||||
<input type="text" placeholder="Type here" class="input" />
|
||||
<label class="toggle text-base-content toggle-xl justify-self-end mb-6">
|
||||
<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" />
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
<!-- Learn More Link -->
|
||||
<div class="relative z-10 mt-8">
|
||||
<a class="btn btn-ghost btn-lg" role="button" target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/Main_Page">
|
||||
Learn more »
|
||||
</a>
|
||||
<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>
|
||||
<span class="label"><a href="#"> Example 1</a><a href="#"> Example 2</a></span>
|
||||
<span class="label justify-self-end"><a href="#"> Advanced </a></span>
|
||||
<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 class="hero-overlay"></div>
|
||||
<div class="hero-content text-neutral-content text-center">
|
||||
<div class="max-w-md">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Community News Section -->
|
||||
<section class="py-16 bg-base-200">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<h2 class="text-4xl font-bold text-center mb-12">Community Updates</h2>
|
||||
<h2 class="text-3xl font-bold text-center mb-8">Community Updates</h2>
|
||||
|
||||
<div id="community-news-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- News cards will be populated here -->
|
||||
@ -90,17 +91,17 @@
|
||||
</section>
|
||||
|
||||
<!-- Mission Statement Section -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="max-w-5xl mx-auto px-4">
|
||||
<div class="prose prose-lg mx-auto text-center">
|
||||
<h2 class="text-4xl font-bold mb-8">About enviPath</h2>
|
||||
<p class="text-xl text-gray-700 leading-relaxed mb-6">
|
||||
<section class="py-16 bg-base-100">
|
||||
<div class="max-w-4xl mx-auto px-4">
|
||||
<h2 class="text-3xl font-bold text-center mb-8">About enviPath</h2>
|
||||
<div class="space-y-4 text-center">
|
||||
<p class="text-lg">
|
||||
enviPath is a database and prediction system for the microbial
|
||||
biotransformation of organic environmental contaminants. The
|
||||
database provides the possibility to store and view experimentally
|
||||
observed biotransformation pathways.
|
||||
</p>
|
||||
<p class="text-xl text-gray-700 leading-relaxed">
|
||||
<p class="text-lg">
|
||||
The pathway prediction system provides different relative reasoning models
|
||||
to predict likely biotransformation pathways and products. Explore our tools
|
||||
and contribute to advancing environmental biotransformation research.
|
||||
@ -180,4 +181,4 @@
|
||||
processDiscourseTopics();
|
||||
});
|
||||
</script>
|
||||
{% endblock content %}
|
||||
{% endblock main_content %}
|
||||
|
||||
Reference in New Issue
Block a user