nico/kobopatch-webui
1
0
Fork 0
Code Activity

Various style fixes
All checks were successful
Build & Test WASM / build-and-test (push) Successful in 1m43s

Browse Source
This commit is contained in:
Nico Verbruggen
2026-03-16 15:43:05 +01:00
parent 2b591a040d
commit 5052284e58
4 changed files with 39 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/public/app.js
View File

@@ -106,9 +106,7 @@
// --- Step 1: Device selection ---
async function enterManualMode() {
manualMode = true;
if (hasFileSystemAccess) {
manualChromeHint.hidden = false;
}
const available = await scanAvailablePatches();
manualVersion.innerHTML = '<option value="">-- Select firmware version --</option>';

37
web/public/index.html
View File

@@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="style.css?ts=1773670636">
<link rel="stylesheet" href="style.css?ts=1773672116">
<script src="https://cdn.jsdelivr.net/npm/jszip@3/dist/jszip.min.js"></script>
</head>
<body>
@@ -52,25 +52,30 @@
Proceed with care.
</div>
<p id="manual-chrome-hint" class="info-banner" hidden>
Tip: if you use Chrome or Edge, this tool can auto-detect your device
and write patched files directly to it. Even easier, but sadly requires a Chromium based browser.
<b>Tip</b>: if you use Chrome or Edge, this tool can auto-detect your device
and write patched files directly to it, which is even easier to do!
</p>
<p>Select your Kobo model and firmware version.
Not sure which model you have?
<a href="https://help.kobo.com/hc/en-us/articles/360019676973-Identify-your-Kobo-eReader-or-Kobo-tablet" target="_blank">Identify your Kobo eReader</a>.
<p>
Select your firmware version first, and then the Kobo model.
</p>
<select id="manual-version">
<option value="">-- Select firmware version --</option>
</select>
<p id="manual-version-hint" class="fallback-hint">
You can identify your the version number shown on your Kobo under <strong>More &gt; Settings &gt; Device information</strong> and by checking <strong>Software version</strong>.
</p>
<select id="manual-model" hidden>
<option value="">-- Select your Kobo model --</option>
</select>
<p id="manual-model-hint" class="fallback-hint" hidden>
You can identify your model by the serial number prefix shown on your Kobo
under <strong>Settings &gt; Device information</strong>.
under <strong>More &gt; Settings &gt; Device information</strong>.
Match the first characters (e.g. N428) to the list above.
If your device isn't listed, it is not supported by this tool.
</p>
<div class="step-actions" style="margin-top: 15px">
<button id="btn-manual-confirm" class="primary" disabled>Continue &#x203A;</button>
</div>
</section>
<!-- Step 1c: Device detected (auto mode info card) -->
@@ -122,16 +127,6 @@
<a href="https://help.kobo.com/hc/en-us/articles/35059171032727" target="_blank">Kobo's support page</a>. The most important bit is that "koboXX" matches, for example "kobo13" for Kobo Libra Color.
</p>
</details>
<!--
<p id="firmware-manual-info" hidden>
No automatic download available for your device.
Please select the firmware zip file manually.
You can download it from
<a href="https://pgaskin.net/KoboStuff/kobofirmware.html" target="_blank">pgaskin.net</a>.
Make sure it matches firmware version <strong id="firmware-version-label-manual"></strong>.
</p>
<input type="file" id="firmware-input" accept=".zip" hidden>
-->
<div class="step-actions">
<button id="btn-build-back" class="secondary">&#x2039; Back</button>
<button id="btn-build" class="primary">Build Patched Firmware</button>
@@ -253,9 +248,9 @@
</dialog>
<!-- wasm_exec.js loaded by patch-worker.js inside the Web Worker -->
<script src="kobo-device.js?ts=1773670636"></script>
<script src="kobopatch.js?ts=1773670636"></script>
<script src="patch-ui.js?ts=1773670636"></script>
<script src="app.js?ts=1773670636"></script>
<script src="kobo-device.js?ts=1773672116"></script>
<script src="kobopatch.js?ts=1773672116"></script>
<script src="patch-ui.js?ts=1773672116"></script>
<script src="app.js?ts=1773672116"></script>
</body>
</html>

2
web/public/patch-worker.js
View File

@@ -10,7 +10,7 @@ async function loadWasm() {
const go = new Go();
const result = await WebAssembly.instantiateStreaming(
fetch('kobopatch.wasm?ts=1773670636'),
fetch('kobopatch.wasm?ts=1773672116'),
go.importObject
);
go.run(result.instance);

29
web/public/style.css
View File

@@ -406,10 +406,11 @@ button.btn-success:hover {
flex-shrink: 0;
}
.patch-description {
.step .patch-description {
margin-top: 0.3rem;
margin-left: 1.6rem;
font-size: 0.75rem;
margin-bottom: 0;
font-size: 0.72rem;
color: var(--text-secondary);
white-space: pre-line;
line-height: 1.4;
@@ -500,7 +501,7 @@ input[type="file"] {
height: calc(7 * 1.5em + 1.5rem);
}
.hint {
.step .hint {
margin-top: 1rem;
padding: 0.65rem 1rem;
background: var(--success-bg);
@@ -532,14 +533,20 @@ input[type="file"] {
text-decoration: underline;
}
.fallback-hint {
margin-top: 0.75rem;
font-size: 0.83rem;
.step .fallback-hint {
margin-top: 0.5rem;
margin-bottom: 1rem;
font-size: 0.78rem;
color: var(--text-secondary);
line-height: 1.5;
}
select + .fallback-hint {
margin-top: -0.5rem;
}
/* Install summary */
.install-summary {
.step .install-summary {
font-size: 0.93rem;
color: var(--text);
line-height: 1.6;
@@ -555,7 +562,7 @@ input[type="file"] {
margin-bottom: 0.75rem;
}
.install-instructions .hint {
.step .install-instructions .hint {
margin-top: 0;
}
@@ -570,7 +577,7 @@ input[type="file"] {
padding: 0.1rem 0;
}
.info-banner {
.step .info-banner {
background: var(--primary-light);
border: 1px solid #bfdbfe;
color: #1e40af;
@@ -596,6 +603,10 @@ input[type="file"] {
font-size: 12px;
}
[hidden] {
display: none !important;
}
select {
display: block;
width: 100%;