[PR #224] [CLOSED] Style index.html with Tailwind CSS and add status icons #226

New issue

Closed

opened 2026-03-02 04:00:49 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 04:00:49 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/eerimoq/moblin/pull/224
Author: @Copilot
Created: 2/8/2026
Status: ❌ Closed

Base: main ← Head: copilot/style-index-html-with-tailwind

📝 Commits (5)

b12b923 Initial plan
e70bb5c Convert index.html from Vanilla CSS Framework to Tailwind CSS
df4820f Fix toggle switch white circle visibility when checked
1c174fe Improve status table readability with styled name-value pairs
e8eed4d Add SVG icons to general status table rows

📊 Changes

3 files changed (+177 additions, -118 deletions)

View changed files

📝 Moblin/RemoteControl/Web/index.html (+111 -99)
📝 Moblin/RemoteControl/Web/js/index.mjs (+62 -18)
📝 Moblin/RemoteControl/Web/js/utils.mjs (+4 -1)

📄 Description

Migrates index.html from Vanilla CSS Framework to Tailwind CSS (matching remote.html and scoreboard.html) and adds icon-based status display for the General section.

Tailwind migration

Swapped vanilla-framework-version-4.14.0.min.css for cdn.tailwindcss.com
Replaced Vanilla grid (row/col-*) → max-w-3xl mx-auto space-y-4
Replaced p-card → bg-zinc-900 border border-zinc-700 rounded-lg
Replaced p-switch → custom CSS toggle; knob stays white when checked
Replaced p-icon--* status indicators → Unicode symbols with Tailwind color classes

Status table readability

Name cells styled text-zinc-400 font-medium, value cells text-zinc-200, rows separated by border-b border-zinc-800
appendToRow in utils.mjs now accepts an optional className parameter

General status icons

Each row displays an inline SVG icon instead of a text label:

Battery — battery icon + percentage
Flame — filled flame icon, colored by thermal state: white (fair), yellow (serious), red (critical)
Mic — microphone icon + Muted/Unmuted
WiFi — signal icon + SSID

Flame values are rendered via allowlist lookup to prevent XSS.

const flameDisplayName = { White: "White", Yellow: "Yellow", Red: "Red" };
const flameName = flameDisplayName[status.general.flame] ?? "—";

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/eerimoq/moblin/pull/224 **Author:** [@Copilot](https://github.com/apps/copilot-swe-agent) **Created:** 2/8/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `copilot/style-index-html-with-tailwind` --- ### 📝 Commits (5) - [`b12b923`](https://github.com/eerimoq/moblin/commit/b12b923b0ed2ac7f54d5ef79c1d909dc48107bcd) Initial plan - [`e70bb5c`](https://github.com/eerimoq/moblin/commit/e70bb5c3c9968fc5e76f91b94c56c128eb1cf906) Convert index.html from Vanilla CSS Framework to Tailwind CSS - [`df4820f`](https://github.com/eerimoq/moblin/commit/df4820fd7cb8e7aa1fb5047ddcfa004915f8bd5d) Fix toggle switch white circle visibility when checked - [`1c174fe`](https://github.com/eerimoq/moblin/commit/1c174fe05ccec739e846dd8d8a31197a9852c1a7) Improve status table readability with styled name-value pairs - [`e8eed4d`](https://github.com/eerimoq/moblin/commit/e8eed4d61a2db9921ef5e75f89008f042a5f9588) Add SVG icons to general status table rows ### 📊 Changes **3 files changed** (+177 additions, -118 deletions) <details> <summary>View changed files</summary> 📝 `Moblin/RemoteControl/Web/index.html` (+111 -99) 📝 `Moblin/RemoteControl/Web/js/index.mjs` (+62 -18) 📝 `Moblin/RemoteControl/Web/js/utils.mjs` (+4 -1) </details> ### 📄 Description Migrates `index.html` from Vanilla CSS Framework to Tailwind CSS (matching `remote.html` and `scoreboard.html`) and adds icon-based status display for the General section. ### Tailwind migration - Swapped `vanilla-framework-version-4.14.0.min.css` for `cdn.tailwindcss.com` - Replaced Vanilla grid (`row`/`col-*`) → `max-w-3xl mx-auto space-y-4` - Replaced `p-card` → `bg-zinc-900 border border-zinc-700 rounded-lg` - Replaced `p-switch` → custom CSS toggle; knob stays white when checked - Replaced `p-icon--*` status indicators → Unicode symbols with Tailwind color classes ### Status table readability - Name cells styled `text-zinc-400 font-medium`, value cells `text-zinc-200`, rows separated by `border-b border-zinc-800` - `appendToRow` in `utils.mjs` now accepts an optional `className` parameter ### General status icons Each row displays an inline SVG icon instead of a text label: - **Battery** — battery icon + percentage - **Flame** — filled flame icon, colored by thermal state: white (fair), yellow (serious), red (critical) - **Mic** — microphone icon + Muted/Unmuted - **WiFi** — signal icon + SSID Flame values are rendered via allowlist lookup to prevent XSS. ```js const flameDisplayName = { White: "White", Yellow: "Yellow", Red: "Red" }; const flameName = flameDisplayName[status.general.flame] ?? "—"; ``` ![General status with icons](https://github.com/user-attachments/assets/3fbe3a8c-6e42-48d0-885d-7db9abb35023)  --- ✨ Let Copilot coding agent [set things up for you](https://github.com/eerimoq/moblin/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>