Add basic index redesign

MIGRATION_GUIDE.md

@@ -4,6 +4,34 @@
 
 This project is using the **Strangler Fig Pattern** to incrementally migrate from Bootstrap 3.3.7 to Tailwind CSS v4 + DaisyUI v5.
 
+## Layout Architecture
+
+### Paper-over-Background Design
+
+The modern framework uses a "paper hovering over background" design:
+
+- **Background**: `bg-base-300` (slightly darker gray)
+- **Content Area**: `bg-base-100` (white/light) with shadow and rounded corners on medium+ screens
+- **Responsive**: Full width on mobile, centered with visible background on larger screens
+
+### Two Layout Modes
+
+**1. Standard Paper Layout** (default)
+```django
+{% block content %}
+    <!-- Your content here with NO enforced styles -->
+    <!-- Automatically wrapped in paper container -->
+{% endblock content %}
+```
+
+**2. Full-Width Layout** (for landing pages, special layouts)
+```django
+{% block main_content %}
+    <!-- Complete control over layout -->
+    <!-- Overrides paper container entirely -->
+{% endblock main_content %}
+```
+
 ## Architecture
 
 ### Two Base Templates

static/css/daisyui-theme.css

@@ -9,26 +9,26 @@
   default: true;
   color-scheme: light;
 
-  --color-base-100: blue;
+  --color-base-100: var(--color-neutral-50);
-  --color-base-200: oklch(95% 0.03 240);
+  --color-base-200: var(--color-neutral-100);
-  --color-base-300: oklch(92% 0.04 240);
+  --color-base-300: var(--color-neutral-200);
-  --color-base-content: oklch(20% 0.05 240);
+  --color-base-content: var(--color-neutral-900);
-  --color-primary: oklch(55% 0.3 240);
+  --color-primary: var(--color-primary-500);
-  --color-primary-content: oklch(98% 0.01 240);
+  --color-primary-content: var(--color-primary-950);
-  --color-secondary: oklch(70% 0.25 200);
+  --color-secondary: var(--color-secondary-500);
-  --color-secondary-content: oklch(98% 0.01 200);
+  --color-secondary-content: var(--color-secondary-950);
-  --color-accent: oklch(65% 0.25 160);
+  --color-accent: var(--color-accent-500);
-  --color-accent-content: oklch(98% 0.01 160);
+  --color-accent-content: var(--color-accent-950);
-  --color-neutral: oklch(50% 0.05 240);
+  --color-neutral: var(--color-neutral-500);
-  --color-neutral-content: oklch(98% 0.01 240);
+  --color-neutral-content: var(--color-neutral-950);
-  --color-info: oklch(70% 0.2 220);
+  --color-info: var(--color-info-500);
-  --color-info-content: oklch(98% 0.01 220);
+  --color-info-content: var(--color-info-950);
-  --color-success: oklch(65% 0.25 140);
+  --color-success: var(--color-success-500);
-  --color-success-content: oklch(98% 0.01 140);
+  --color-success-content: var(--color-success-950);
-  --color-warning: oklch(80% 0.25 80);
+  --color-warning: var(--color-warning-500);
-  --color-warning-content: oklch(20% 0.05 80);
+  --color-warning-content: var(--color-warning-950);
-  --color-error: oklch(65% 0.3 30);
+  --color-error: var(--color-error-500);
-  --color-error-content: oklch(98% 0.01 30);
+  --color-error-content: var(--color-error-950);
 
   /* border radius */
   --radius-selector: 1rem;
@@ -61,7 +61,7 @@
   --color-accent-content: var(--color-neutral-950);
   --color-neutral: var(--color-neutral-300);
   --color-neutral-content: var(--color-neutral-900);
-  --color-base-100: blue;
+  --color-base-100: var(--color-neutral-900);
   --color-base-200: var(--color-neutral-800);
   --color-base-300: var(--color-neutral-700);
   --color-base-content: var(--color-neutral-50);

static/css/input.css

@@ -12,22 +12,3 @@
 }
 
 @import "./daisyui-theme.css";
-
-/* Bootstrap compatibility layer - prevent Bootstrap from overriding Tailwind */
-@layer base {
-  /* Ensure Tailwind's preflight takes precedence in non-legacy sections */
-  body:not(.legacy-bootstrap *) {
-    @apply antialiased;
-  }
-}
-
-@layer utilities {
-  /* Add important utilities for overriding Bootstrap where needed */
-  .tw-flex {
-    display: flex !important;
-  }
-
-  .tw-grid {
-    display: grid !important;
-  }
-}

templates/framework_modern.html

@@ -59,22 +59,23 @@
         <!-- End Matomo Code -->
     {% endif %}
 </head>
-<body class="min-h-screen flex flex-col">
+<body class="min-h-screen bg-base-300">
     {% include "includes/navbar.html" %}
 
     {# Main Content Area #}
-    <main class="flex-1">
+    <main class="w-full">
-        <div id="docContent" class="container mx-auto">
+        {% block main_content %}
+            {# Breadcrumbs - outside main content, optional #}
             {% if breadcrumbs %}
-                <div id="bread" class="py-4">
+                <div id="bread" class="max-w-7xl mx-auto px-4 py-4">
                     <div class="text-sm breadcrumbs">
                         <ul>
                             {% for elem in breadcrumbs %}
                                 {% for name, url in elem.items %}
                                     {% if forloop.parentloop.last %}
-                                        <li class="font-semibold">{{ name }}</li>
+                                        <li>{{ name }}</li>
                                     {% else %}
-                                        <li><a href="{{ url }}" class="link link-hover">{{ name }}</a></li>
+                                        <li><a href="{{ url }}">{{ name }}</a></li>
                                     {% endif %}
                                 {% endfor %}
                             {% endfor %}
@@ -83,29 +84,35 @@
                 </div>
             {% endif %}
 
-            {% if message %}
+            {# Main content container - paper effect on medium+ screens #}
-                <div id="message" class="alert alert-info my-4">
+            <div id="docContent" class="w-full xl:w-xl md:mx-auto md:my-8 bg-base-100 md:shadow-2xl md:rounded-lg border-2">
-                    {{ message }}
+                {# Messages - inside paper #}
-                </div>
+                {% if message %}
-            {% endif %}
+                    <div id="message" class="alert alert-info m-4">
-
+                        {{ message }}
-            {% block content %}
-            {% endblock content %}
-
-            {% if meta.url_contains_package and meta.current_package.license %}
-                <div class="collapse collapse-arrow bg-base-200 my-8">
-                    <input type="checkbox" checked />
-                    <div class="collapse-title text-xl font-medium">
-                        License
                     </div>
-                    <div class="collapse-content">
+                {% endif %}
-                        <a target="_blank" href="{{ meta.current_package.license.link }}">
+
-                            <img src="{{ meta.current_package.license.image_link }}" alt="License">
+                {# Page content - no enforced styles #}
-                        </a>
+                {% block content %}
+                {% endblock content %}
+
+                {# License - inside paper if present #}
+                {% if meta.url_contains_package and meta.current_package.license %}
+                    <div class="collapse collapse-arrow bg-base-200 m-8">
+                        <input type="checkbox" checked />
+                        <div class="collapse-title text-xl font-medium">
+                            License
+                        </div>
+                        <div class="collapse-content">
+                            <a target="_blank" href="{{ meta.current_package.license.link }}">
+                                <img src="{{ meta.current_package.license.image_link }}" alt="License">
+                            </a>
+                        </div>
                     </div>
-                </div>
+                {% endif %}
-            {% endif %}
+            </div>
-        </div>
+        {% endblock main_content %}
     </main>
 
     {% include "includes/footer.html" %}

templates/index/index.html

@@ -1,74 +1,75 @@
 {% extends "framework_modern.html" %}
 {% load static %}
-{% block content %}
+{% block main_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">
+    <section>
-        <!-- Blurred Background -->
+            <div
-        <div class="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-teal-50 backdrop-blur-3xl"></div>
+                class="hero min-h-screen w-full mx-auto"
+            >
 
-        <!-- Logo - Full width, centered -->
+                <div class="hero-content flex-col lg:flex-row-reverse w-full">
-        <div class="relative z-10 w-full max-w-5xl px-4 mb-12 text-center">
+                  <div class="card bg-base-100 shrink-0 shadow-2xl p-8 w-1/2">
-            <img id="image-logo-long"
+                    <div class="card-body">
-                 class="w-full h-auto"
+                    <fieldset class="fieldset">
-                 alt="enviPath"
-                 src='{% static "/images/logo-long.svg" %}'/>
-        </div>
 
-        <!-- Search Component - Center of Hero -->
+                    <label class="toggle text-base-content toggle-xl justify-self-end mb-6">
-        <div class="relative z-10 w-full max-w-4xl px-4">
+                        <input type="checkbox" />
-            <form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
+                        <svg aria-label="smiles mode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="size-5">
-                {% csrf_token %}
+                            <g
-                <input type="text" placeholder="Type here" class="input" />
+                            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">
+                        </svg>
-                <input type="hidden" id="index-form-predict" name="predict" value="predict">
+                        </label>
-                <input type="hidden" id="current-action" value="predict">
-            </form>
-        </div>
 
-        <!-- Learn More Link -->
+                        <form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
-        <div class="relative z-10 mt-8">
+                            {% csrf_token %}
-            <a class="btn btn-ghost btn-lg" role="button" target="_blank"
+                            <div class="join w-full mx-auto">
-               href="https://wiki.envipath.org/index.php/Main_Page">
+                                <input type="text" id="index-form-text-input" placeholder="cannonical SMILES string" class="input grow input-lg join-item" />
-                Learn more &raquo;
+                                <button class="btn btn-lg bg-primary-950 text-primary-50 join-item">Predict!</button>
-            </a>
+                            </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">
+    <section class="py-16 bg-base-100">
-        <div class="max-w-5xl mx-auto px-4">
+        <div class="max-w-4xl mx-auto px-4">
-            <div class="prose prose-lg mx-auto text-center">
+            <h2 class="text-3xl font-bold text-center mb-8">About enviPath</h2>
-                <h2 class="text-4xl font-bold mb-8">About enviPath</h2>
+            <div class="space-y-4 text-center">
-                <p class="text-xl text-gray-700 leading-relaxed mb-6">
+                <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 %}