enviPy-bayer/templates/index/index.html

{% 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">&times;</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>

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

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

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

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

        <!-- 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 &raquo;
            </a>
        </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>

            <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-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">
                    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">
                    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 content %}