From c1ca734e814f819c645ecf30b41565fff4633f3e Mon Sep 17 00:00:00 2001
From: Tobias O <tobias.olenyi@envipath.com>
Date: Wed, 12 Nov 2025 16:22:02 +1300
Subject: [PATCH] refactor: change input toggle style

---
 templates/index/index.html | 148 ++++++++++++++++++++-----------------
 1 file changed, 80 insertions(+), 68 deletions(-)

diff --git a/templates/index/index.html b/templates/index/index.html
index 3c869713..6c197081 100644
--- a/templates/index/index.html
+++ b/templates/index/index.html
@@ -2,74 +2,86 @@
 {% 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="flex items-center gap-2">
-              <!-- <span class="text-sm text-neutral-500">Input Mode:</span> -->
-              <label class="toggle text-base-content toggle-md">
+          <div class="my-4 ml-8 flex h-fit flex-row items-center justify-start">
+            <div class="flex items-center gap-1">
+              <label class="swap btn btn-ghost btn-sm p-1">
                 <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"
+                <span class="swap-on flex items-center gap-1">
+                  <div
+                    class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1"
                   >
-                    <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>
+                    <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>
+                  </div>
+                  <span class="ext-xs">SMILES</span>
+                </span>
+                <span class="swap-off flex items-center gap-1">
+                  <div
+                    class="bg-neutral/50 text-neutral-content flex items-center justify-center rounded-full p-1"
+                  >
+                    <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>
+                  </div>
+                  <span class="text-base/50 text-xs">Draw</span>
+                </span>
               </label>
             </div>
           </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 +91,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 +126,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,12 +136,12 @@
                   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>
-                <div class="flex justify-end mt-1 w-full">
-                  <a class="label   justify-end" href="/predict">Advanced</a>
+                <div class="mt-1 flex w-full justify-end">
+                  <a class="label justify-end" href="/predict">Advanced</a>
                 </div>
               </div>
               <input
@@ -152,18 +164,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"
@@ -179,18 +191,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
@@ -203,7 +215,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>
@@ -213,7 +225,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>
@@ -224,12 +236,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" %}"