UI: Font Awesome icons, Material touches, 3-line collapse button

Swap all emoji icons for Font Awesome (sidebar, homepage tiles, profile/chat/
list/settings/relay actions); add Roboto font + card elevation hover for a
Material feel. Replace the bottom 'Collapse' pill with a 3-line (fa-bars) toggle
in the sidebar header; remove the old collapse pill CSS/JS. Copy buttons toggle
FA check/copy via innerHTML. Plain text status (✓/✗) and back arrows kept.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Jon
2026-06-05 20:06:59 +01:00
parent 1881b74d92
commit 4ed2f9ba14
7 changed files with 74 additions and 72 deletions

View File

@@ -33,19 +33,19 @@
<!-- Area 1: your accounts -->
<div class="tiles">
<a class="tile" href="/users">
<span class="t-ico">👤</span>
<span class="t-ico"><i class="fa-solid fa-user"></i></span>
<span class="t-title">Users</span>
</a>
<a class="tile" href="/businesses">
<span class="t-ico">💼</span>
<span class="t-ico"><i class="fa-solid fa-briefcase"></i></span>
<span class="t-title">Businesses</span>
</a>
<a class="tile" href="/bots">
<span class="t-ico">🤖</span>
<span class="t-ico"><i class="fa-solid fa-robot"></i></span>
<span class="t-title">Bots</span>
</a>
<a class="tile" href="https://simplex.chat/file/" target="_blank" rel="noopener">
<span class="t-ico">📁</span>
<span class="t-ico"><i class="fa-solid fa-upload"></i></span>
<span class="t-title">File Upload</span>
</a>
</div>
@@ -53,15 +53,15 @@
<!-- Area: relays -->
<div class="tiles">
<a class="tile" href="/relays/chat">
<span class="t-ico">💬</span>
<span class="t-ico"><i class="fa-solid fa-comments"></i></span>
<span class="t-title">Chat Relay</span>
</a>
<a class="tile" href="/relays/file">
<span class="t-ico">📤</span>
<span class="t-ico"><i class="fa-solid fa-file-export"></i></span>
<span class="t-title">File Relay</span>
</a>
<a class="tile" href="/relays/message">
<span class="t-ico">✉️</span>
<span class="t-ico"><i class="fa-solid fa-envelope"></i></span>
<span class="t-title">Message Relay</span>
</a>
</div>
@@ -69,16 +69,16 @@
<!-- Area 3: system -->
<div class="tiles">
<a class="tile" href="/network">
<span class="t-ico">📡</span>
<span class="t-ico"><i class="fa-solid fa-tower-broadcast"></i></span>
<span class="t-title">Network</span>
</a>
<a class="tile" href="/notifications">
<span class="t-ico">🔔</span>
<span class="t-ico"><i class="fa-solid fa-bell"></i></span>
<span class="t-title">Notifications</span>
<span class="notif-badge" style="display:none;"></span>
</a>
<a class="tile" href="/settings">
<span class="t-ico">⚙️</span>
<span class="t-ico"><i class="fa-solid fa-gear"></i></span>
<span class="t-title">Settings</span>
</a>
</div>
@@ -86,7 +86,7 @@
<!-- Area 3: SimpleX (external) -->
<div class="tiles">
<a class="tile" href="https://simplex.chat/downloads/" target="_blank" rel="noopener">
<span class="t-ico">📲</span>
<span class="t-ico"><i class="fa-solid fa-download"></i></span>
<span class="t-title">Get SimpleX App</span>
</a>
</div>