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

4
web/public/app.js
View File

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

39
web/public/index.html
View File

@@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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="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> <script src="https://cdn.jsdelivr.net/npm/jszip@3/dist/jszip.min.js"></script>
</head> </head>
<body> <body>
@@ -52,25 +52,30 @@
Proceed with care. Proceed with care.
</div> </div>
<p id="manual-chrome-hint" class="info-banner" hidden> <p id="manual-chrome-hint" class="info-banner" hidden>
Tip: if you use Chrome or Edge, this tool can auto-detect your device <b>Tip</b>: 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. and write patched files directly to it, which is even easier to do!
</p> </p>
<p>Select your Kobo model and firmware version. <p>
Not sure which model you have? Select your firmware version first, and then the Kobo model.
<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> </p>
<select id="manual-version"> <select id="manual-version">
<option value="">-- Select firmware version --</option> <option value="">-- Select firmware version --</option>
</select> </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> <select id="manual-model" hidden>
<option value="">-- Select your Kobo model --</option> <option value="">-- Select your Kobo model --</option>
</select> </select>
<p id="manual-model-hint" class="fallback-hint" hidden> <p id="manual-model-hint" class="fallback-hint" hidden>
You can identify your model by the serial number prefix shown on your Kobo 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. 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> </p>
<button id="btn-manual-confirm" class="primary" disabled>Continue &#x203A;</button> <div class="step-actions" style="margin-top: 15px">
<button id="btn-manual-confirm" class="primary" disabled>Continue &#x203A;</button>
</div>
</section> </section>
<!-- Step 1c: Device detected (auto mode info card) --> <!-- 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. <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> </p>
</details> </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"> <div class="step-actions">
<button id="btn-build-back" class="secondary">&#x2039; Back</button> <button id="btn-build-back" class="secondary">&#x2039; Back</button>
<button id="btn-build" class="primary">Build Patched Firmware</button> <button id="btn-build" class="primary">Build Patched Firmware</button>
@@ -253,9 +248,9 @@
</dialog> </dialog>
<!-- wasm_exec.js loaded by patch-worker.js inside the Web Worker --> <!-- wasm_exec.js loaded by patch-worker.js inside the Web Worker -->
<script src="kobo-device.js?ts=1773670636"></script> <script src="kobo-device.js?ts=1773672116"></script>
<script src="kobopatch.js?ts=1773670636"></script> <script src="kobopatch.js?ts=1773672116"></script>
<script src="patch-ui.js?ts=1773670636"></script> <script src="patch-ui.js?ts=1773672116"></script>
<script src="app.js?ts=1773670636"></script> <script src="app.js?ts=1773672116"></script>
</body> </body>
</html> </html>

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

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

29
web/public/style.css
View File

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