nvrl/ayto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated ui

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-15 11:22:44 +01:00
parent d25607b4bd
commit 98f04e22fd
2 changed files with 238 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
ayto-daten.json Normal file
View File

@@ -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
}
]
}

22
ayto/index.html
View File

@@ -24,6 +24,7 @@
--panel-bg: rgba(20, 20, 30, 0.7); --panel-bg: rgba(20, 20, 30, 0.7);
--panel-border: rgba(0, 229, 255, 0.2); --panel-border: rgba(0, 229, 255, 0.2);
--primary: #00e5ff; /* Cyan */ --primary: #00e5ff; /* Cyan */
--primary-rgb: 0, 229, 255;
--primary-hover: #00b3cc; --primary-hover: #00b3cc;
--secondary: #ff007a; /* Magenta */ --secondary: #ff007a; /* Magenta */
--text-main: #ffffff; --text-main: #ffffff;
@@ -38,6 +39,7 @@
--panel-bg: rgba(255, 255, 255, 0.8); --panel-bg: rgba(255, 255, 255, 0.8);
--panel-border: rgba(107, 192, 213, 0.4); --panel-border: rgba(107, 192, 213, 0.4);
--primary: #f38da1; /* SAI Pink */ --primary: #f38da1; /* SAI Pink */
--primary-rgb: 243, 141, 161;
--primary-hover: #e07489; --primary-hover: #e07489;
--secondary: #6bc0d5; /* SAI Blue */ --secondary: #6bc0d5; /* SAI Blue */
--text-main: #2c3e50; --text-main: #2c3e50;
@@ -52,6 +54,7 @@
--panel-bg: rgba(34, 34, 34, 0.8); --panel-bg: rgba(34, 34, 34, 0.8);
--panel-border: rgba(252, 227, 0, 0.2); --panel-border: rgba(252, 227, 0, 0.2);
--primary: #fce300; /* Trench Yellow */ --primary: #fce300; /* Trench Yellow */
--primary-rgb: 252, 227, 0;
--primary-hover: #d4bf00; --primary-hover: #d4bf00;
--secondary: #575c3a; /* Olive */ --secondary: #575c3a; /* Olive */
--text-main: #e0e0e0; --text-main: #e0e0e0;
@@ -66,6 +69,7 @@
--panel-bg: rgba(255, 255, 255, 0.9); --panel-bg: rgba(255, 255, 255, 0.9);
--panel-border: rgba(206, 45, 45, 0.3); --panel-border: rgba(206, 45, 45, 0.3);
--primary: #ce2d2d; /* Blurryface Red */ --primary: #ce2d2d; /* Blurryface Red */
--primary-rgb: 206, 45, 45;
--primary-hover: #a82020; --primary-hover: #a82020;
--secondary: #000000; /* Black */ --secondary: #000000; /* Black */
--text-main: #111111; --text-main: #111111;
@@ -80,6 +84,7 @@
--panel-bg: rgba(44, 44, 44, 0.8); --panel-bg: rgba(44, 44, 44, 0.8);
--panel-border: rgba(217, 56, 46, 0.3); --panel-border: rgba(217, 56, 46, 0.3);
--primary: #f2c12e; /* Clancy Yellow */ --primary: #f2c12e; /* Clancy Yellow */
--primary-rgb: 242, 193, 46;
--primary-hover: #d9ab24; --primary-hover: #d9ab24;
--secondary: #d9382e; /* Clancy Red */ --secondary: #d9382e; /* Clancy Red */
--text-main: #f5f5f5; --text-main: #f5f5f5;
@@ -228,10 +233,11 @@
<!-- Main Content --> <!-- 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">
<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 --> <!-- 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 --> <!-- 1. The Cast -->
<section class="theme-panel rounded-3xl p-6 shadow-xl animate-slide-in"> <section class="theme-panel rounded-3xl p-6 shadow-xl animate-slide-in">
@@ -324,7 +330,7 @@
</div> </div>
<!-- RIGHT COLUMN: RESULTS --> <!-- 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"> <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"> <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) { function displayProbabilityGrid(gridData) {
probTableHead.innerHTML = ` probTableHead.innerHTML = `
<tr> <tr>
<th class="p-3 border-b border-r" style="border-color: var(--panel-border);"></th> <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 whitespace-nowrap text-center" style="border-color: var(--panel-border);">${name}</th>`).join('')} ${gridData.columns.map(name => `<th class="p-3 border-b text-center" style="border-color: var(--panel-border);">${name}</th>`).join('')}
</tr> </tr>
`; `;
@@ -686,11 +692,13 @@
badgeStyle = 'background: rgba(255,51,51,0.05); color: var(--error); opacity: 0.4;'; badgeStyle = 'background: rgba(255,51,51,0.05); color: var(--error); opacity: 0.4;';
textContent = '0%'; textContent = '0%';
} else { } 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);"> 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>`; </td>`;
}).join('')} }).join('')}
</tr> </tr>