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:42:13 +01:00
parent 98f04e22fd
commit 05cb6fee88
1 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
ayto/index.html
View File

@@ -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?");
}