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

22
ayto/index.html
View File

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