enviPy-bayer/templates/index/index.html

{% extends "framework_modern.html" %}
{% load static %}
{% block main_content %}

    <!-- Hero Section with Logo and Search -->
    <section>
            <div
                class="hero min-h-screen w-full mx-auto"
            >

                <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">

                    <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" />

                        </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>
                            <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-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 -->
                <div id="loading" class="col-span-full flex justify-center">
                    <span class="loading loading-spinner loading-lg"></span>
                </div>
            </div>

            <!-- Fallback for discourse widget -->
            <div class="hidden">
                <d-topics-list discourse-url="https://community.envipath.org"
                              per-page="10"
                              category="10"
                              template="complete"
                              id="discourse-topics">
                </d-topics-list>
            </div>
        </div>
    </section>

    <!-- Mission Statement Section -->
    <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-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.
                </p>
            </div>
        </div>
    </section>

    <script language="javascript">
        var currentPackage = "{{ meta.current_package.url }}";

        // Process discourse topics into individual cards
        function processDiscourseTopics() {
            setTimeout(function() {
                const topicsList = $('#discourse-topics');
                if (topicsList.length && topicsList.find('li').length > 0) {
                    $('#loading').hide();

                    topicsList.find('li').each(function(index) {
                        if (index >= 6) return false; // Limit to 6 cards

                        const $item = $(this);
                        const $link = $item.find('a').first();
                        const title = $link.text().trim();
                        const url = $link.attr('href');
                        const excerpt = $item.find('.topic-excerpt').text().trim() || 'Click to read more...';

                        const card = `
                            <div class="card bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300">
                                <div class="card-body">
                                    <h3 class="card-title text-lg line-clamp-2">
                                        <a href="${url}" target="_blank" class="hover:text-primary">
                                            ${title}
                                        </a>
                                    </h3>
                                    <p class="text-gray-600 line-clamp-3">${excerpt}</p>
                                    <div class="card-actions justify-end mt-4">
                                        <a href="${url}" target="_blank" class="btn btn-sm btn-primary">
                                            Read More
                                        </a>
                                    </div>
                                </div>
                            </div>
                        `;

                        $('#community-news-container').append(card);
                    });
                } else {
                    // Retry if not loaded yet
                    if (index < 10) {
                        processDiscourseTopics();
                    } else {
                        $('#loading').html('<p class="text-gray-500">Unable to load community updates</p>');
                    }
                }
            }, 500);
        }

        $(function () {
            // Handle form submission on Enter
            $('#index-form').on("submit", function (e) {
                e.preventDefault();

                var textSmiles = $('#index-form-text-input').val().trim();

                if (textSmiles === '') {
                    return;
                }

                $('#index-form-smiles').val(textSmiles);
                $("#index-form").attr("action", currentPackage + "/pathway");
                $("#index-form").attr("method", 'POST');
                this.submit();
            });

            // Process discourse topics into cards
            processDiscourseTopics();
        });
    </script>
{% endblock main_content %}