Compare commits

...

2 Commits

2 changed files with 21 additions and 30 deletions
+11 -11
View File
@@ -16,7 +16,7 @@
<div class="max-w-7xl mx-auto px-6 py-4"> <div class="max-w-7xl mx-auto px-6 py-4">
<div class="flex items-center justify-between mb-6"> <div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-heading">OTAMan <span id="slogan" class="text-sm font-normal text-gray-500 dark:text-slate-400 ml-2" data-l10n="SIM OTA with a Human Face">SIM OTA with a Human Face</span> <span class="text-xs text-gray-400 dark:text-slate-500 ml-1">v1.3.2</span></h1> <h1 class="text-2xl font-bold text-heading">OTAMan <span id="slogan" class="text-sm font-normal text-gray-500 dark:text-slate-400 ml-2" data-l10n="SIM OTA with a Human Face">SIM OTA with a Human Face</span> <span class="text-xs text-gray-400 dark:text-slate-500 ml-1">v1.4.0</span></h1>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<button id="install-btn" class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-slate-600 hover:bg-gray-200 dark:hover:bg-slate-700" style="display:none">INSTALL PWA [for offline use]</button> <button id="install-btn" class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-slate-600 hover:bg-gray-200 dark:hover:bg-slate-700" style="display:none">INSTALL PWA [for offline use]</button>
<a href="https://github.com/anttro/otaman" target="_blank" class="text-xs text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300">github</a> <a href="https://github.com/anttro/otaman" target="_blank" class="text-xs text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300">github</a>
@@ -917,8 +917,8 @@
<div id="stk-menu-panel" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden"> <div id="stk-menu-panel" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
<div class="bg-white dark:bg-slate-800 rounded-lg p-4 max-w-md w-full max-h-[80vh] flex flex-col"> <div class="bg-white dark:bg-slate-800 rounded-lg p-4 max-w-md w-full max-h-[80vh] flex flex-col">
<div class="flex justify-between items-center mb-3"> <div class="flex justify-between items-center mb-3">
<button id="stk-back-btn" onclick="stkMenuRespond('back')" class="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" disabled>← Back</button> <button id="stk-back-btn" onclick="stkMenuRespond('back')" class="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" style="display:none">← Back</button>
<span id="stk-menu-panel-title" class="font-bold text-sm"></span> <span id="stk-menu-panel-title" class="font-bold text-sm flex-1 text-center"></span>
<button onclick="stkMenuExit()" class="px-3 py-1 text-xs rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50">Exit</button> <button onclick="stkMenuExit()" class="px-3 py-1 text-xs rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50">Exit</button>
</div> </div>
<div id="stk-menu-panel-content" class="flex-1 overflow-auto"></div> <div id="stk-menu-panel-content" class="flex-1 overflow-auto"></div>
@@ -2770,7 +2770,7 @@ function stkMenuOpen() {
document.getElementById('stk-menu-panel-title').textContent = document.getElementById('stk-menu-title').textContent; document.getElementById('stk-menu-panel-title').textContent = document.getElementById('stk-menu-title').textContent;
stkSetPillsDisabled(true); stkSetPillsDisabled(true);
stkMenuStack = []; stkMenuStack = [];
document.getElementById('stk-back-btn').disabled = true; document.getElementById('stk-back-btn').style.display = 'none';
document.getElementById('stk-menu-buttons').classList.add('hidden'); document.getElementById('stk-menu-buttons').classList.add('hidden');
document.getElementById('stk-menu-panel').classList.remove('hidden'); document.getElementById('stk-menu-panel').classList.remove('hidden');
stkMenuRenderItems(); stkMenuRenderItems();
@@ -2795,7 +2795,7 @@ function stkMenuRenderItems() {
if (!data || !data.items) { content.innerHTML = '<span class="text-red-500 text-sm">No menu data</span>'; return; } if (!data || !data.items) { content.innerHTML = '<span class="text-red-500 text-sm">No menu data</span>'; return; }
let html = '<div class="space-y-1">'; let html = '<div class="space-y-1">';
data.items.forEach(item => { data.items.forEach(item => {
html += '<div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer" onclick="stkMenuItemClick(' + item.id + ')"><span class="w-5 text-xs font-bold text-gray-400 text-right">' + item.id + '</span><span class="text-sm">' + esc(item.text) + '</span></div>'; html += '<div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer" onclick="stkMenuItemClick(' + item.id + ')"><span class="w-5 text-xs text-gray-300 dark:text-gray-600 text-right">' + item.id + '</span><span class="text-sm">' + esc(item.text) + '</span></div>';
}); });
html += '</div>'; html += '</div>';
content.innerHTML = html; content.innerHTML = html;
@@ -2822,7 +2822,7 @@ function stkMenuHandleResponse(data) {
btns.classList.add('hidden'); btns.classList.add('hidden');
if (data.type === 'display_text') { if (data.type === 'display_text') {
content.innerHTML = '<div class="text-sm whitespace-pre-wrap p-2 bg-gray-50 dark:bg-slate-700 rounded">' + esc(data.text) + '</div>'; content.innerHTML = '<div class="text-sm whitespace-pre-wrap p-2 bg-gray-50 dark:bg-slate-700 rounded">' + esc(data.text) + '</div>';
backBtn.disabled = stkMenuStack.length === 0; backBtn.style.display = '';
btns.classList.remove('hidden'); btns.classList.remove('hidden');
} else if (data.type === 'select_item') { } else if (data.type === 'select_item') {
stkMenuStack.push(data.items); stkMenuStack.push(data.items);
@@ -2830,16 +2830,16 @@ function stkMenuHandleResponse(data) {
const items = data.items; const items = data.items;
let html = '<div class="space-y-1">'; let html = '<div class="space-y-1">';
items.forEach(item => { items.forEach(item => {
html += '<div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer" onclick="stkSubItemClick(' + item.id + ')"><span class="w-5 text-xs font-bold text-gray-400 text-right">' + item.id + '</span><span class="text-sm">' + esc(item.text) + '</span></div>'; html += '<div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer" onclick="stkSubItemClick(' + item.id + ')"><span class="w-5 text-xs text-gray-300 dark:text-gray-600 text-right">' + item.id + '</span><span class="text-sm">' + esc(item.text) + '</span></div>';
}); });
html += '</div>'; html += '</div>';
content.innerHTML = html; content.innerHTML = html;
backBtn.disabled = false; backBtn.style.display = '';
btns.classList.remove('hidden'); btns.classList.remove('hidden');
} else { } else {
content.innerHTML = '<span class="text-gray-500 text-sm">Done</span>'; content.innerHTML = '<span class="text-gray-500 text-sm">SW: ' + esc(data.sw || '?') + '</span>';
stkSetPillsDisabled(false); stkSetPillsDisabled(false);
backBtn.disabled = stkMenuStack.length === 0; backBtn.style.display = 'none';
} }
} }
@@ -2860,7 +2860,7 @@ async function stkMenuRespond(result) {
if (result === 'cancel' || result === 'back' || result === 'timeout') { if (result === 'cancel' || result === 'back' || result === 'timeout') {
stkMenuRenderItems(); stkMenuRenderItems();
document.getElementById('stk-menu-buttons').classList.add('hidden'); document.getElementById('stk-menu-buttons').classList.add('hidden');
document.getElementById('stk-back-btn').disabled = stkMenuStack.length === 0; document.getElementById('stk-back-btn').style.display = 'none';
return; return;
} }
stkMenuHandleResponse(data); stkMenuHandleResponse(data);
+10 -19
View File
@@ -902,11 +902,6 @@ video {
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
} }
.bg-amber-50 {
--tw-bg-opacity: 1;
background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-black\/50 { .bg-black\/50 {
background-color: rgb(0 0 0 / 0.5); background-color: rgb(0 0 0 / 0.5);
} }
@@ -1101,16 +1096,16 @@ video {
line-height: 1.625; line-height: 1.625;
} }
.text-amber-600 {
--tw-text-opacity: 1;
color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-blue-600 { .text-blue-600 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity, 1)); color: rgb(37 99 235 / var(--tw-text-opacity, 1));
} }
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 { .text-gray-400 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1)); color: rgb(156 163 175 / var(--tw-text-opacity, 1));
@@ -1289,10 +1284,6 @@ video {
border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
} }
.dark\:bg-amber-900\/30:is(.dark *) {
background-color: rgb(120 53 15 / 0.3);
}
.dark\:bg-blue-500:is(.dark *) { .dark\:bg-blue-500:is(.dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
@@ -1317,16 +1308,16 @@ video {
background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); 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 *) { .dark\:text-blue-400:is(.dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity, 1)); color: rgb(96 165 250 / var(--tw-text-opacity, 1));
} }
.dark\:text-gray-600:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.dark\:text-green-400:is(.dark *) { .dark\:text-green-400:is(.dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity, 1)); color: rgb(74 222 128 / var(--tw-text-opacity, 1));