From 98f04e22fd6268dd5fbf4a668e9d55682f1eb8e5 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Sun, 15 Mar 2026 11:22:44 +0100
Subject: [PATCH] updated ui

---
 ayto-daten.json | 223 ++++++++++++++++++++++++++++++++++++++++++++++++
 ayto/index.html |  22 +++--
 2 files changed, 238 insertions(+), 7 deletions(-)
 create mode 100644 ayto-daten.json

diff --git a/ayto-daten.json b/ayto-daten.json
new file mode 100644
index 0000000..ac9a25b
--- /dev/null
+++ b/ayto-daten.json
@@ -0,0 +1,223 @@
+{
+  "group1Names": [
+    "Enes",
+    "Levin",
+    "Tano",
+    "Dino",
+    "Sinan",
+    "Kaan",
+    "Monacco",
+    "Joshi Josh",
+    "Danish",
+    "Dion"
+  ],
+  "group2Names": [
+    "Anna",
+    "Camel",
+    "Chiara",
+    "Deisy",
+    "Ina",
+    "Joanna",
+    "Nadja",
+    "Nasti",
+    "Selina",
+    "Sophia",
+    "Tori"
+  ],
+  "truthBooths": [
+    {
+      "id": 1773521104020,
+      "p1": "Monacco",
+      "p2": "Anna",
+      "isMatch": false
+    },
+    {
+      "id": 1773521117906,
+      "p1": "Sinan",
+      "p2": "Ina",
+      "isMatch": false
+    },
+    {
+      "id": 1773521131763,
+      "p1": "Danish",
+      "p2": "Nadja",
+      "isMatch": true
+    },
+    {
+      "id": 1773521159964,
+      "p1": "Dino",
+      "p2": "Deisy",
+      "isMatch": true
+    },
+    {
+      "id": 1773521176929,
+      "p1": "Kaan",
+      "p2": "Sophia",
+      "isMatch": false
+    },
+    {
+      "id": 1773521184996,
+      "p1": "Joshi Josh",
+      "p2": "Joanna",
+      "isMatch": false
+    },
+    {
+      "id": 1773521197773,
+      "p1": "Sinan",
+      "p2": "Nasti",
+      "isMatch": true
+    },
+    {
+      "id": 1773521208546,
+      "p1": "Monacco",
+      "p2": "Camel",
+      "isMatch": true
+    }
+  ],
+  "ceremonies": [
+    {
+      "id": 1773521286753,
+      "pairs": {
+        "Enes": "Anna",
+        "Levin": "Camel",
+        "Tano": "Chiara",
+        "Dino": "Deisy",
+        "Sinan": "Ina",
+        "Kaan": "Joanna",
+        "Monacco": "Nadja",
+        "Joshi Josh": "Selina",
+        "Danish": "Sophia",
+        "Dion": "Tori"
+      },
+      "beams": 2
+    },
+    {
+      "id": 1773521356766,
+      "pairs": {
+        "Enes": "Nasti",
+        "Levin": "Chiara",
+        "Tano": "Tori",
+        "Dino": "Deisy",
+        "Sinan": "Ina",
+        "Kaan": "Anna",
+        "Monacco": "Nadja",
+        "Joshi Josh": "Joanna",
+        "Danish": "Camel",
+        "Dion": "Selina"
+      },
+      "beams": 3
+    },
+    {
+      "id": 1773521423101,
+      "pairs": {
+        "Enes": "Selina",
+        "Levin": "Camel",
+        "Tano": "Tori",
+        "Dino": "Deisy",
+        "Sinan": "Nasti",
+        "Kaan": "Anna",
+        "Monacco": "Nadja",
+        "Joshi Josh": "Joanna",
+        "Danish": "Sophia",
+        "Dion": "Chiara"
+      },
+      "beams": 4
+    },
+    {
+      "id": 1773521467532,
+      "pairs": {
+        "Enes": "Selina",
+        "Levin": "Camel",
+        "Tano": "Tori",
+        "Dino": "Deisy",
+        "Sinan": "Sophia",
+        "Kaan": "Anna",
+        "Monacco": "Ina",
+        "Joshi Josh": "Joanna",
+        "Danish": "Nadja",
+        "Dion": "Nasti"
+      },
+      "beams": 4
+    },
+    {
+      "id": 1773521508899,
+      "pairs": {
+        "Enes": "Selina",
+        "Levin": "Camel",
+        "Tano": "Tori",
+        "Dino": "Deisy",
+        "Sinan": "Nasti",
+        "Kaan": "Sophia",
+        "Monacco": "Ina",
+        "Joshi Josh": "Joanna",
+        "Danish": "Nadja",
+        "Dion": "Chiara"
+      },
+      "beams": 4
+    },
+    {
+      "id": 1773521550559,
+      "pairs": {
+        "Enes": "Selina",
+        "Levin": "Chiara",
+        "Tano": "Tori",
+        "Dino": "Deisy",
+        "Sinan": "Camel",
+        "Kaan": "Sophia",
+        "Monacco": "Nasti",
+        "Joshi Josh": "Ina",
+        "Danish": "Nadja",
+        "Dion": "Anna"
+      },
+      "beams": 5
+    },
+    {
+      "id": 1773521597142,
+      "pairs": {
+        "Enes": "Sophia",
+        "Levin": "Chiara",
+        "Tano": "Anna",
+        "Dino": "Deisy",
+        "Sinan": "Nasti",
+        "Kaan": "Selina",
+        "Monacco": "Camel",
+        "Joshi Josh": "Joanna",
+        "Danish": "Nadja",
+        "Dion": "Tori"
+      },
+      "beams": 6
+    },
+    {
+      "id": 1773521641329,
+      "pairs": {
+        "Enes": "Sophia",
+        "Levin": "Ina",
+        "Tano": "Joanna",
+        "Dino": "Deisy",
+        "Sinan": "Nasti",
+        "Kaan": "Selina",
+        "Monacco": "Camel",
+        "Joshi Josh": "Anna",
+        "Danish": "Nadja",
+        "Dion": "Chiara"
+      },
+      "beams": 5
+    },
+    {
+      "id": 1773521691492,
+      "pairs": {
+        "Enes": "Ina",
+        "Levin": "Chiara",
+        "Tano": "Joanna",
+        "Dino": "Deisy",
+        "Sinan": "Nasti",
+        "Kaan": "Anna",
+        "Monacco": "Camel",
+        "Joshi Josh": "Tori",
+        "Danish": "Nadja",
+        "Dion": "Sophia"
+      },
+      "beams": 7
+    }
+  ]
+}
\ No newline at end of file
diff --git a/ayto/index.html b/ayto/index.html
index 29049b6..f7077b6 100644
--- a/ayto/index.html
+++ b/ayto/index.html
@@ -24,6 +24,7 @@
             --panel-bg: rgba(20, 20, 30, 0.7);
             --panel-border: rgba(0, 229, 255, 0.2);
             --primary: #00e5ff; /* Cyan */
+            --primary-rgb: 0, 229, 255;
             --primary-hover: #00b3cc;
             --secondary: #ff007a; /* Magenta */
             --text-main: #ffffff;
@@ -38,6 +39,7 @@
             --panel-bg: rgba(255, 255, 255, 0.8);
             --panel-border: rgba(107, 192, 213, 0.4);
             --primary: #f38da1; /* SAI Pink */
+            --primary-rgb: 243, 141, 161;
             --primary-hover: #e07489;
             --secondary: #6bc0d5; /* SAI Blue */
             --text-main: #2c3e50;
@@ -52,6 +54,7 @@
             --panel-bg: rgba(34, 34, 34, 0.8);
             --panel-border: rgba(252, 227, 0, 0.2);
             --primary: #fce300; /* Trench Yellow */
+            --primary-rgb: 252, 227, 0;
             --primary-hover: #d4bf00;
             --secondary: #575c3a; /* Olive */
             --text-main: #e0e0e0;
@@ -66,6 +69,7 @@
             --panel-bg: rgba(255, 255, 255, 0.9);
             --panel-border: rgba(206, 45, 45, 0.3);
             --primary: #ce2d2d; /* Blurryface Red */
+            --primary-rgb: 206, 45, 45;
             --primary-hover: #a82020;
             --secondary: #000000; /* Black */
             --text-main: #111111;
@@ -80,6 +84,7 @@
             --panel-bg: rgba(44, 44, 44, 0.8);
             --panel-border: rgba(217, 56, 46, 0.3);
             --primary: #f2c12e; /* Clancy Yellow */
+            --primary-rgb: 242, 193, 46;
             --primary-hover: #d9ab24;
             --secondary: #d9382e; /* Clancy Red */
             --text-main: #f5f5f5;
@@ -228,10 +233,11 @@
 
     <!-- Main Content -->
     <main class="w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8 items-start">
+        <div class="grid grid-cols-1 xl:grid-cols-12 gap-6 lg:gap-8 items-start">
             
             <!-- LEFT COLUMN: INPUTS -->
-            <div class="lg:col-span-4 flex flex-col gap-6">
+            <div class="xl:col-span-3 flex flex-col gap-6">
+
                 
                 <!-- 1. The Cast -->
                 <section class="theme-panel rounded-3xl p-6 shadow-xl animate-slide-in">
@@ -324,7 +330,7 @@
             </div>
 
             <!-- RIGHT COLUMN: RESULTS -->
-            <div class="lg:col-span-8 flex flex-col gap-6">
+            <div class="xl:col-span-9 flex flex-col gap-6">
                 
                 <section id="status-dashboard" class="hidden animate-slide-in">
                     <div class="theme-panel rounded-3xl p-8 relative overflow-hidden flex flex-col md:flex-row items-center justify-between gap-6 shadow-2xl">
@@ -666,8 +672,8 @@
         function displayProbabilityGrid(gridData) {
             probTableHead.innerHTML = `
                 <tr>
-                    <th class="p-3 border-b border-r" style="border-color: var(--panel-border);"></th>
-                    ${gridData.columns.map(name => `<th class="p-3 border-b whitespace-nowrap text-center" style="border-color: var(--panel-border);">${name}</th>`).join('')}
+                    <th class="p-3 border-b border-r" style="border-color: var(--panel-border); width: 10%;"></th>
+                    ${gridData.columns.map(name => `<th class="p-3 border-b text-center" style="border-color: var(--panel-border);">${name}</th>`).join('')}
                 </tr>
             `;
             
@@ -686,11 +692,13 @@
                             badgeStyle = 'background: rgba(255,51,51,0.05); color: var(--error); opacity: 0.4;';
                             textContent = '0%';
                         } else {
-                            badgeStyle = 'color: var(--text-main); font-weight: 700;';
+                            // 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);`;
                         }
 
                         return `<td class="p-3 text-center border-b" style="border-color: var(--panel-border);">
-                            <span class="prob-badge" style="${badgeStyle}">${textContent}</span>
+                            <span class="prob-badge inline-block w-full" style="${badgeStyle}">${textContent}</span>
                         </td>`;
                     }).join('')}
                 </tr>