From 0987278d795b4c6dd6a061f904e11110ac38ff0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=A2=D1=80=D0=BE=D1=88?=
 =?UTF-8?q?=D0=B8=D0=BD?= <i@atroshin.ru>
Date: Sun, 9 Aug 2026 21:59:31 +0300
Subject: [PATCH] group SIM/USIM/BER-TLV/RAM tabs into C-APDU tab with sub-tab
 pills

---
 index.html | 39 +++++++++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 904dfae..f8b0875 100644
--- a/index.html
+++ b/index.html
@@ -26,17 +26,21 @@
 	</div>
 
 	<div class="flex gap-1 mb-4 border-b border-gray-300 dark:border-slate-600">
-		<button class="tab-btn active px-4 py-2 text-sm rounded-t bg-blue-600 dark:bg-blue-500 text-white dark:text-white" data-tab="sim">SIM RFM</button>
-		<button class="tab-btn px-4 py-2 text-sm rounded-t bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 text-gray-700 dark:text-slate-300" data-tab="usim">USIM RFM</button>
-		<button class="tab-btn px-4 py-2 text-sm rounded-t bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 text-gray-700 dark:text-slate-300" data-tab="ber">BER-TLV</button>
-		<button class="tab-btn px-4 py-2 text-sm rounded-t bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 text-gray-700 dark:text-slate-300" data-tab="ram">RAM</button>
+		<button class="tab-btn active px-4 py-2 text-sm rounded-t bg-blue-600 dark:bg-blue-500 text-white dark:text-white" data-tab="c-apdu">C-APDU</button>
 		<button class="tab-btn px-4 py-2 text-sm rounded-t bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 text-gray-700 dark:text-slate-300" data-tab="sp">Secured Packet</button>
 		<button class="tab-btn px-4 py-2 text-sm rounded-t bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 text-gray-700 dark:text-slate-300" data-tab="response" data-l10n="Response parser">Response parser</button>
 		<button class="tab-btn px-4 py-2 text-sm rounded-t bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 text-gray-700 dark:text-slate-300" data-tab="cards" data-l10n="Cards">Cards</button>
 		<button class="tab-btn px-4 py-2 text-sm rounded-t bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 text-gray-700 dark:text-slate-300" data-tab="pysim" data-l10n="Card reader">Card reader</button>
 	</div>
 
-	<div id="tab-sim" class="tab-content">
+	<div id="tab-c-apdu" class="tab-content">
+		<div class="flex gap-1 mb-2">
+			<button class="c-apdu-subtab px-3 py-1 text-xs rounded-full bg-blue-600 text-white" data-sub="sim" onclick="cApduSwitchSubtab('sim')">SIM</button>
+			<button class="c-apdu-subtab px-3 py-1 text-xs rounded-full bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600" data-sub="usim" onclick="cApduSwitchSubtab('usim')">USIM</button>
+			<button class="c-apdu-subtab px-3 py-1 text-xs rounded-full bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600" data-sub="ber" onclick="cApduSwitchSubtab('ber')">BER-TLV</button>
+			<button class="c-apdu-subtab px-3 py-1 text-xs rounded-full bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600" data-sub="ram" onclick="cApduSwitchSubtab('ram')">RAM</button>
+		</div>
+		<div id="c-apdu-sub-sim">
 		<div class="flex gap-4 mb-3">
 			<div class="w-2/3">
 				<div class="mb-3">
@@ -201,7 +205,7 @@
 		<button onclick="packToSp('sim-result')" id="sim-pack-btn" disabled class="mb-3 px-5 py-2.5 bg-emerald-600 text-white text-sm font-medium rounded hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Pack into Secured packet">Pack into Secured packet</button>
 	</div>
 
-	<div id="tab-usim" class="tab-content hidden">
+	</div><div id="c-apdu-sub-usim" class="hidden">
 		<div class="flex gap-4 mb-3">
 			<div class="w-2/3">
 				<div class="mb-3">
@@ -366,7 +370,7 @@
 		<button onclick="packToSp('usim-result')" id="usim-pack-btn" disabled class="mb-3 px-5 py-2.5 bg-emerald-600 text-white text-sm font-medium rounded hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Pack into Secured packet">Pack into Secured packet</button>
 	</div>
 
-	<div id="tab-ber" class="tab-content hidden">
+	</div><div id="c-apdu-sub-ber" class="hidden">
 		<div class="mb-3">
 			<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-slate-300">Format</label>
 			<select id="ber-format" class="w-full border border-gray-300 dark:border-slate-600 text-sm rounded px-3 py-2.5 dark:bg-slate-800 dark:text-slate-300 font-mono">
@@ -391,7 +395,7 @@
 		<button onclick="packToSp('ber-result')" id="ber-pack-btn" disabled class="mb-3 px-5 py-2.5 bg-emerald-600 text-white text-sm font-medium rounded hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Pack into Secured packet">Pack into Secured packet</button>
 	</div>
 
-	<div id="tab-ram" class="tab-content hidden">
+	</div><div id="c-apdu-sub-ram" class="hidden">
 		<div class="mb-3">
 			<label class="block mb-1 text-sm font-medium text-gray-700 dark:text-slate-300" data-l10n="Command">Command</label>
 			<select id="ram-cmd" onchange="updateRamFields()" class="w-full border border-gray-300 dark:border-slate-600 text-sm rounded px-3 py-2.5 dark:bg-slate-800">
@@ -603,6 +607,8 @@
 		<textarea id="ram-result" rows="3" readonly class="w-full font-mono border border-gray-300 dark:border-slate-600 text-sm rounded px-3 py-2.5 bg-gray-100 dark:bg-slate-800"></textarea>
 		<button onclick="packToSp('ram-result')" id="ram-pack-btn" disabled class="mb-3 px-5 py-2.5 bg-emerald-600 text-white text-sm font-medium rounded hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Pack into Secured packet">Pack into Secured packet</button>
 	</div>
+	</div>
+</div>
 
 	<div id="tab-sp" class="tab-content hidden">
 		<div class="mb-3">
@@ -993,6 +999,23 @@ function switchTab(name) {
 	const active = document.querySelector(`.tab-btn[data-tab="${name}"]`);
 	active.classList.remove('bg-gray-200', 'text-gray-700', 'dark:bg-slate-700', 'dark:text-slate-300');
 	active.classList.add('bg-blue-600', 'text-white', 'dark:bg-blue-500', 'dark:text-white');
+	if (name === 'c-apdu') cApduSwitchSubtab('sim');
+}
+
+function cApduSwitchSubtab(name) {
+	document.querySelectorAll('.c-apdu-subtab').forEach(btn => {
+		const active = btn.dataset.sub === name;
+		btn.classList.toggle('bg-blue-600', active);
+		btn.classList.toggle('text-white', active);
+		btn.classList.toggle('bg-gray-200', !active);
+		btn.classList.toggle('dark:bg-slate-700', !active);
+		btn.classList.toggle('text-gray-700', !active);
+		btn.classList.toggle('dark:text-slate-300', !active);
+	});
+	['sim', 'usim', 'ber', 'ram'].forEach(s => {
+		const el = document.getElementById('c-apdu-sub-' + s);
+		if (el) el.classList.toggle('hidden', s !== name);
+	});
 	if (name === 'sim' || name === 'usim') {
 		updateSimUsimFields(name);
 		updateSimSelectMethod(name);