ui: embedded labels (fieldset/legend) for the phone simulator and SCP81 containers
- Phone simulator: STK menu, STATUS and Polling, TERMINAL PROFILE and SET UP EVENT LIST become fieldsets with legends; 'Fetched proactive commands:' gains a bordered container - SCP81 listener: the HTTP OTA listener label moves into the legend (the live state span stays next to it), Script results (R-APDUs) and HTTP OTA log become fieldsets (the log's Clear button moves to the body top-right) - Options (applied at Start) stays a details/summary but its summary is styled as an embedded label (page-background patch over the top border, native triangle kept) so it expands/collapses from the legend - html.test.js: card-fieldset test no longer assumes exactly two fieldsets; new guard test for the legends and the Options summary - Tailwind rebuild of style.css; SW cache simple-v192 (version stays 2.4.0)
This commit is contained in:
+27
-31
@@ -909,15 +909,15 @@
|
||||
</div>
|
||||
<div id="phone-sub-phone">
|
||||
<div class="flex flex-wrap items-start gap-4 mb-4">
|
||||
<div class="border border-gray-200 dark:border-slate-700 rounded p-3">
|
||||
<div class="mb-1 text-sm text-gray-500 dark:text-slate-400" data-l10n="STK menu">STK menu</div>
|
||||
<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3">
|
||||
<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="STK menu">STK menu</legend>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="stk-menu-btn" data-needs="card" onclick="stkMenuOpen()" class="px-2.5 py-1 text-sm rounded bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed" style="display:none">STK: <span id="stk-menu-title"></span></button>
|
||||
<span id="stk-menu-none" class="text-xs text-gray-500 dark:text-slate-400" style="display:none" data-l10n="No menu set by the card">No menu set by the card</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 dark:border-slate-700 rounded p-3">
|
||||
<div class="mb-1 text-sm text-gray-500 dark:text-slate-400" data-l10n="STATUS and Polling">STATUS and Polling</div>
|
||||
</fieldset>
|
||||
<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3">
|
||||
<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="STATUS and Polling">STATUS and Polling</legend>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="pli-status-btn" data-needs="card" onclick="pysimStatusPoll()" class="px-2.5 py-1 text-sm rounded bg-gray-600 text-white hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Send STATUS">Send STATUS</button>
|
||||
<span class="text-xs text-gray-500 dark:text-slate-400">|</span>
|
||||
@@ -925,22 +925,24 @@
|
||||
<button id="pli-pause-btn" data-needs="server" onclick="pysimPollToggle()" class="px-2.5 py-1 text-sm rounded bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600 disabled:opacity-40 disabled:cursor-not-allowed">OFF</button>
|
||||
<span id="pli-poll-stat" class="text-xs text-gray-400"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-gray-200 dark:border-slate-700 rounded p-3">
|
||||
<div class="mb-1 text-sm text-gray-500 dark:text-slate-400" data-l10n="TERMINAL PROFILE">TERMINAL PROFILE</div>
|
||||
</fieldset>
|
||||
<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3">
|
||||
<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="TERMINAL PROFILE">TERMINAL PROFILE</legend>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="tp-send-btn" data-needs="card" onclick="tpSend()" class="px-2.5 py-1 text-sm rounded bg-gray-600 text-white hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Send">Send</button>
|
||||
<button id="tp-configure-btn" data-needs="server" onclick="tpOpen()" class="px-2.5 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Configure">Configure</button>
|
||||
<span id="tp-status" class="text-xs text-gray-400 dark:text-slate-500"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 border border-gray-200 dark:border-slate-700 rounded p-3">
|
||||
<div class="mb-1 text-sm text-gray-500 dark:text-slate-400" data-l10n="Events that the card monitors (SET UP EVENT LIST):">Events that the card monitors (SET UP EVENT LIST):</div>
|
||||
</fieldset>
|
||||
<fieldset class="flex-1 min-w-0 border border-gray-200 dark:border-slate-700 rounded p-3">
|
||||
<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="Events that the card monitors (SET UP EVENT LIST):">Events that the card monitors (SET UP EVENT LIST):</legend>
|
||||
<div id="pysim-event-list" class="text-sm font-mono text-gray-600 dark:text-slate-400"></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="mb-2 text-sm text-gray-500 dark:text-slate-400" data-l10n="Fetched proactive commands:">Fetched proactive commands:</div>
|
||||
<div id="pysim-proactive-log" class="text-sm font-mono text-gray-600 dark:text-slate-400"></div>
|
||||
<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3">
|
||||
<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="Fetched proactive commands:">Fetched proactive commands:</legend>
|
||||
<div id="pysim-proactive-log" class="text-sm font-mono text-gray-600 dark:text-slate-400"></div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="phone-sub-tr" class="hidden">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
@@ -959,11 +961,8 @@
|
||||
<button class="scp81-subtab px-4 py-1.5 text-sm 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-scp81-sub="scripts" onclick="scp81SwitchSubtab('scripts')" data-l10n="Scripts">Scripts</button>
|
||||
</div>
|
||||
<div id="scp81-sub-listener">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-sm text-gray-500 dark:text-slate-400" data-l10n="HTTP OTA listener">HTTP OTA listener</span>
|
||||
<span id="scp81-state" class="text-xs text-gray-400"></span>
|
||||
</div>
|
||||
<div class="border border-gray-200 dark:border-slate-700 rounded p-3 mb-3">
|
||||
<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3 mb-3">
|
||||
<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400"><span data-l10n="HTTP OTA listener">HTTP OTA listener</span> <span id="scp81-state" class="text-xs text-gray-400"></span></legend>
|
||||
<div class="flex flex-wrap items-end gap-3">
|
||||
<div>
|
||||
<label class="block mb-1 text-xs font-medium text-gray-600 dark:text-slate-400" data-l10n="Mode">Mode</label>
|
||||
@@ -994,9 +993,9 @@
|
||||
<div id="scp81-psk-note" class="mt-2 text-xs text-gray-500 dark:text-slate-400" data-l10n="PSK keys come from the card presets (Cards tab): the listener picks the key by the identity the card sends in the TLS handshake.">PSK keys come from the card presets (Cards tab): the listener picks the key by the identity the card sends in the TLS handshake.</div>
|
||||
<div id="scp81-redirect-note" class="hidden mt-2 text-xs text-gray-500 dark:text-slate-400" data-l10n="Redirect: every BIP channel the card opens is connected to this Host:Port (the external HTTP OTA platform); TLS is terminated there, and the address the card requests is only logged.">Redirect: every BIP channel the card opens is connected to this Host:Port (the external HTTP OTA platform); TLS is terminated there, and the address the card requests is only logged.</div>
|
||||
<div id="scp81-passthru-note" class="hidden mt-2 text-xs text-gray-500 dark:text-slate-400" data-l10n="Pass-through: the terminal connects each BIP channel to the destination the card requests in OPEN CHANNEL (Other address + transport port, TCP client only); Host and Port above are not used, TLS is terminated by that platform, and the server's network is used (lab only).">Pass-through: the terminal connects each BIP channel to the destination the card requests in OPEN CHANNEL (Other address + transport port, TCP client only); Host and Port above are not used, TLS is terminated by that platform, and the server's network is used (lab only).</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<details id="scp81-opts" class="border border-gray-200 dark:border-slate-700 rounded mb-3">
|
||||
<summary class="p-3 cursor-pointer select-none text-sm text-gray-500 dark:text-slate-400">
|
||||
<summary class="w-fit list-inside relative -top-2 -mb-1 mx-3 px-1 cursor-pointer select-none text-xs font-medium text-gray-500 dark:text-slate-400 bg-neutral-50 dark:bg-slate-900">
|
||||
<span data-l10n="Options (applied at Start)">Options (applied at Start)</span>
|
||||
<span id="scp81-opts-badge" class="ml-1 text-xs text-amber-500 dark:text-amber-400"></span>
|
||||
</summary>
|
||||
@@ -1038,20 +1037,17 @@
|
||||
<label class="flex items-center gap-2 text-xs text-gray-600 dark:text-slate-300 cursor-pointer mt-3"><input type="checkbox" id="opt-link-events" onchange="scp81OptionsPersist()" class="rounded"> <span data-l10n="Show link events (Channel status ENVELOPEs, TS 102 223 7.5.11)">Show link events (Channel status ENVELOPEs, TS 102 223 7.5.11)</span></label>
|
||||
</div>
|
||||
</details>
|
||||
<div class="border border-gray-200 dark:border-slate-700 rounded p-3 mb-3">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="text-sm text-gray-500 dark:text-slate-400" data-l10n="Script results (R-APDUs)">Script results (R-APDUs)</span>
|
||||
<span id="scp81-results-state" class="text-xs text-gray-400"></span>
|
||||
</div>
|
||||
<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3 mb-3">
|
||||
<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400"><span data-l10n="Script results (R-APDUs)">Script results (R-APDUs)</span> <span id="scp81-results-state" class="text-xs text-gray-400"></span></legend>
|
||||
<div id="scp81-results" class="text-sm font-mono text-gray-600 dark:text-slate-400 max-h-[35vh] overflow-auto"></div>
|
||||
</div>
|
||||
<div class="border border-gray-200 dark:border-slate-700 rounded p-3">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="text-sm text-gray-500 dark:text-slate-400" data-l10n="HTTP OTA log">HTTP OTA log</span>
|
||||
</fieldset>
|
||||
<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-3">
|
||||
<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400" data-l10n="HTTP OTA log">HTTP OTA log</legend>
|
||||
<div class="flex justify-end mb-1">
|
||||
<button data-needs="server" onclick="scp81LogClear()" class="px-2.5 py-1 text-xs rounded bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Clear">Clear</button>
|
||||
</div>
|
||||
<div id="scp81-log" class="text-sm font-mono text-gray-600 dark:text-slate-400 max-h-[55vh] overflow-auto"></div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="scp81-sub-scripts" class="hidden">
|
||||
<div class="border border-gray-200 dark:border-slate-700 rounded p-3 mb-3">
|
||||
|
||||
+253
-15
@@ -554,40 +554,68 @@ video {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.\!container {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.\!container {
|
||||
max-width: 640px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.\!container {
|
||||
max-width: 768px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.\!container {
|
||||
max-width: 1024px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.\!container {
|
||||
max-width: 1280px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.\!container {
|
||||
max-width: 1536px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
@@ -612,6 +640,10 @@ video {
|
||||
inset: 0px;
|
||||
}
|
||||
|
||||
.-top-2 {
|
||||
top: -0.5rem;
|
||||
}
|
||||
|
||||
.bottom-full {
|
||||
bottom: 100%;
|
||||
}
|
||||
@@ -636,6 +668,11 @@ video {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.mx-3 {
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
@@ -646,12 +683,16 @@ video {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
.-mb-1 {
|
||||
margin-bottom: -0.25rem;
|
||||
}
|
||||
|
||||
.mb-1\.5 {
|
||||
margin-bottom: 0.375rem;
|
||||
.mb-0\.5 {
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
@@ -674,10 +715,18 @@ video {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.ml-0\.5 {
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.ml-10 {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
@@ -722,6 +771,10 @@ video {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@@ -742,6 +795,10 @@ video {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.contents {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -750,6 +807,10 @@ video {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
@@ -758,6 +819,22 @@ video {
|
||||
max-height: 8rem;
|
||||
}
|
||||
|
||||
.max-h-56 {
|
||||
max-height: 14rem;
|
||||
}
|
||||
|
||||
.max-h-\[35vh\] {
|
||||
max-height: 35vh;
|
||||
}
|
||||
|
||||
.max-h-\[45vh\] {
|
||||
max-height: 45vh;
|
||||
}
|
||||
|
||||
.max-h-\[55vh\] {
|
||||
max-height: 55vh;
|
||||
}
|
||||
|
||||
.max-h-\[60vh\] {
|
||||
max-height: 60vh;
|
||||
}
|
||||
@@ -790,6 +867,10 @@ video {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.w-14 {
|
||||
width: 3.5rem;
|
||||
}
|
||||
|
||||
.w-16 {
|
||||
width: 4rem;
|
||||
}
|
||||
@@ -802,6 +883,14 @@ video {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.w-32 {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.w-36 {
|
||||
width: 9rem;
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
@@ -818,6 +907,14 @@ video {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.w-52 {
|
||||
width: 13rem;
|
||||
}
|
||||
|
||||
.w-56 {
|
||||
width: 14rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
@@ -830,6 +927,11 @@ video {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -838,6 +940,14 @@ video {
|
||||
min-width: 0px;
|
||||
}
|
||||
|
||||
.min-w-\[180px\] {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.max-w-3xl {
|
||||
max-width: 48rem;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
}
|
||||
@@ -870,6 +980,16 @@ video {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -884,6 +1004,10 @@ video {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.list-inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
@@ -904,6 +1028,14 @@ video {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -916,6 +1048,10 @@ video {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -956,8 +1092,9 @@ video {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
.gap-x-2 {
|
||||
-moz-column-gap: 0.5rem;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-x-3 {
|
||||
@@ -970,10 +1107,18 @@ video {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-y-0\.5 {
|
||||
row-gap: 0.125rem;
|
||||
}
|
||||
|
||||
.gap-y-1 {
|
||||
row-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-y-1\.5 {
|
||||
row-gap: 0.375rem;
|
||||
}
|
||||
|
||||
.gap-y-2 {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
@@ -1057,6 +1202,10 @@ video {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
@@ -1077,6 +1226,16 @@ video {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.border-blue-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-blue-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-gray-100 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
|
||||
@@ -1092,6 +1251,20 @@ video {
|
||||
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-green-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-purple-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-t-transparent {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
.bg-black\/50 {
|
||||
background-color: rgb(0 0 0 / 0.5);
|
||||
}
|
||||
@@ -1126,6 +1299,11 @@ video {
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-gray-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-gray-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
|
||||
@@ -1155,11 +1333,20 @@ video {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bg-violet-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.p-1\.5 {
|
||||
padding: 0.375rem;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
@@ -1251,10 +1438,18 @@ video {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pb-0\.5 {
|
||||
padding-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.pb-3 {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
@@ -1325,8 +1520,8 @@ video {
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
@@ -1357,6 +1552,11 @@ video {
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
.text-amber-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(245 158 11 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-amber-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(217 119 6 / var(--tw-text-opacity, 1));
|
||||
@@ -1447,6 +1647,11 @@ video {
|
||||
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-slate-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(148 163 184 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
@@ -1466,6 +1671,10 @@ video {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.opacity-40 {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.opacity-50 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@@ -1509,6 +1718,11 @@ video {
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-gray-600:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-gray-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
|
||||
@@ -1519,16 +1733,31 @@ video {
|
||||
background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-red-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-slate-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-violet-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(109 40 217 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-gray-600:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-red-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-red-600:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(220 38 38 / var(--tw-text-opacity, 1));
|
||||
@@ -1551,10 +1780,6 @@ video {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.disabled\:opacity-50:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.dark\:border-slate-600:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
|
||||
@@ -1569,6 +1794,11 @@ video {
|
||||
border-color: rgb(51 65 85 / 0.5);
|
||||
}
|
||||
|
||||
.dark\:border-slate-800:is(.dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(30 41 59 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:bg-blue-500:is(.dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
|
||||
@@ -1593,6 +1823,11 @@ video {
|
||||
background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-amber-400:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 191 36 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-blue-400:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(96 165 250 / var(--tw-text-opacity, 1));
|
||||
@@ -1658,6 +1893,11 @@ video {
|
||||
color: rgb(250 204 21 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-yellow-500:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(234 179 8 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:invert:is(.dark *) {
|
||||
--tw-invert: invert(100%);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
@@ -1685,9 +1925,7 @@ video {
|
||||
.dark\:hover\:text-slate-300:hover:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(203 213 225 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
/* ===== Theme contrast adjustments ===== */
|
||||
}/* ===== Theme contrast adjustments ===== */
|
||||
|
||||
/* Light theme: darken softer (muted) text one step for higher contrast */
|
||||
.text-gray-400 {
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
const CACHE = 'simple-v191';
|
||||
const CACHE = 'simple-v192';
|
||||
const URLS = [
|
||||
'index.html',
|
||||
'help.html',
|
||||
|
||||
@@ -27,19 +27,37 @@ test('cards list shows the SCP81 PSK column with blue/red row buttons', () => {
|
||||
|
||||
test('the card form groups the SCP80 and SCP81 fields into labelled fieldsets', () => {
|
||||
const fieldsets = [...html.matchAll(/<fieldset[\s\S]*?<\/fieldset>/g)].map(m => m[0]);
|
||||
assert.strictEqual(fieldsets.length, 2);
|
||||
assert.match(fieldsets[0], /<legend[^>]*data-l10n="SCP80 \(GSM 03\.48, ETSI TS 102 225\)"/);
|
||||
assert.match(fieldsets[0], /id="cards-kic"/);
|
||||
assert.match(fieldsets[0], /id="cards-kid-key"/);
|
||||
assert.match(fieldsets[1], /<legend[^>]*data-l10n="SCP81 \(HTTP OTA\)"/);
|
||||
assert.match(fieldsets[1], /id="cards-psk-id"/);
|
||||
assert.match(fieldsets[1], /id="cards-psk-key"/);
|
||||
const scp80 = fieldsets.find(f => /data-l10n="SCP80 \(GSM 03\.48, ETSI TS 102 225\)"/.test(f));
|
||||
const scp81 = fieldsets.find(f => /data-l10n="SCP81 \(HTTP OTA\)"/.test(f));
|
||||
assert.ok(scp80, 'SCP80 card fieldset not found');
|
||||
assert.ok(scp81, 'SCP81 card fieldset not found');
|
||||
assert.match(scp80, /id="cards-kic"/);
|
||||
assert.match(scp80, /id="cards-kid-key"/);
|
||||
assert.match(scp81, /id="cards-psk-id"/);
|
||||
assert.match(scp81, /id="cards-psk-key"/);
|
||||
// the PSK explanation lives inside the SCP81 group, not outside it
|
||||
assert.match(fieldsets[1], /data-l10n="SCP81 HTTP OTA: the listener picks the key/);
|
||||
assert.match(scp81, /data-l10n="SCP81 HTTP OTA: the listener picks the key/);
|
||||
// the ICCID field is not in either group
|
||||
assert.ok(!fieldsets.some(f => f.includes('id="cards-iccid"')));
|
||||
});
|
||||
|
||||
test('labelled containers use fieldsets with embedded legends', () => {
|
||||
const legendCls = '<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400"';
|
||||
for (const label of ['STK menu', 'STATUS and Polling', 'TERMINAL PROFILE',
|
||||
'Events that the card monitors (SET UP EVENT LIST):', 'Fetched proactive commands:',
|
||||
'HTTP OTA log']) {
|
||||
assert.ok(html.includes(legendCls + ' data-l10n="' + label + '"'), 'no legend for ' + label);
|
||||
}
|
||||
// legends with dynamic state spans put data-l10n on the inner span so
|
||||
// translatePage() does not wipe the sibling
|
||||
assert.ok(html.includes('<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400"><span data-l10n="HTTP OTA listener">HTTP OTA listener</span> <span id="scp81-state"'));
|
||||
assert.ok(html.includes('<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400"><span data-l10n="Script results (R-APDUs)">Script results (R-APDUs)</span> <span id="scp81-results-state"'));
|
||||
// the Options block stays a details/summary, with the summary styled as
|
||||
// the embedded label (page-background patch over the border)
|
||||
assert.match(html, /<details id="scp81-opts" class="border border-gray-200 dark:border-slate-700 rounded mb-3">\s*<summary class="w-fit list-inside[^"]*bg-neutral-50 dark:bg-slate-900"/);
|
||||
assert.match(html, /<summary class="w-fit list-inside[^"]*">\s*<span data-l10n="Options \(applied at Start\)">/);
|
||||
});
|
||||
|
||||
test('PLI qualifier tables cover all standard qualifiers', () => {
|
||||
// ESN (07), MEID (0B) and Supported RATs (1A) must at least be named, in
|
||||
// both the TR Config dictionary and the proactive-log short labels.
|
||||
|
||||
Reference in New Issue
Block a user