From 05cb6fee88197494937b62d6193fe02e0a655502 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Sun, 15 Mar 2026 11:42:13 +0100
Subject: [PATCH] updated ui

---
 ayto/index.html | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/ayto/index.html b/ayto/index.html
index f7077b6..8dd5afe 100644
--- a/ayto/index.html
+++ b/ayto/index.html
@@ -232,7 +232,8 @@
     </nav>
 
     <!-- Main Content -->
-    <main class="w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8">
+    <main class="w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 flex flex-col gap-6 lg:gap-8">
+        <!-- TOP ROW -->
         <div class="grid grid-cols-1 xl:grid-cols-12 gap-6 lg:gap-8 items-start">
             
             <!-- LEFT COLUMN: INPUTS -->
@@ -272,9 +273,10 @@
                     </div>
                     <p id="initial-possibilities-text" class="text-center mt-4 text-[10px] font-bold theme-text-muted italic tracking-wide"></p>
                 </section>
+            </div>
 
-                <!-- Hidden until setup -->
-                <div id="input-sections" class="hidden flex-col gap-6">
+            <!-- RIGHT COLUMN: RESULTS -->
+            <div class="xl:col-span-9 flex flex-col gap-6">
                     
                     <!-- 2. Truth Booth -->
                     <section class="theme-panel rounded-3xl p-6 shadow-xl animate-slide-in">
@@ -494,7 +496,7 @@
         }
 
         // --- Core Logic ---
-        function handleSetupContestants() {
+        function handleSetupContestants(skipCalc = false) {
             const g1 = g1NamesText.value.split('\n').map(s => s.trim()).filter(s => s.length > 0);
             const g2 = g2NamesText.value.split('\n').map(s => s.trim()).filter(s => s.length > 0);
 
@@ -514,14 +516,14 @@
             initialPossibilitiesText.textContent = `${group1Names.length} in Gruppe A • ${group2Names.length} in Gruppe B`;
             
             inputSections.classList.remove("hidden");
-            inputSections.classList.add("flex");
+            inputSections.classList.add("grid");
             statusDashboard.classList.remove("hidden");
             gridSection.classList.remove("hidden");
             
             saveButton.disabled = false;
             lucide.createIcons();
             
-            handleCalculate(); // Auto-calculate on start
+            if (!skipCalc) handleCalculate(); // Auto-calculate on start
             return true;
         }
 
@@ -692,9 +694,9 @@
                             badgeStyle = 'background: rgba(255,51,51,0.05); color: var(--error); opacity: 0.4;';
                             textContent = '0%';
                         } else {
-                            // Dynamic opacity calculation (e.g. 20% = 0.2 opacity of the primary color)
-                            const intensity = Math.max(0.1, prob / 100);
-                            badgeStyle = `background: rgba(var(--primary-rgb), ${intensity}); color: var(--text-main); font-weight: 700; border: 1px solid rgba(var(--primary-rgb), 0.3);`;
+                            // Dynamic heatmap using CSS color-mix
+                            const mixColor = `color-mix(in srgb, var(--success) ${prob}%, var(--error))`;
+                            badgeStyle = `background: color-mix(in srgb, ${mixColor} 15%, transparent); color: ${mixColor}; font-weight: 800; border: 1px solid color-mix(in srgb, ${mixColor} 30%, transparent);`;
                         }
 
                         return `<td class="p-3 text-center border-b" style="border-color: var(--panel-border);">
@@ -725,12 +727,12 @@
                     const s = JSON.parse(ev.target.result);
                     g1NamesText.value = s.group1Names.join('\n');
                     g2NamesText.value = s.group2Names.join('\n');
-                    handleSetupContestants();
+                    handleSetupContestants(true); // skip initial calc
                     truthBooths = s.truthBooths || []; 
                     ceremonies = s.ceremonies || [];
                     truthBooths.forEach(renderTruthBoothUI);
                     ceremonies.forEach((c, i) => renderCeremonyUI(c, i + 1));
-                    handleCalculate();
+                    handleCalculate(); // Calc once all data is loaded
                 } catch(err) {
                     showError("Fehler beim Laden der Datei. Ist sie beschädigt?");
                 }