sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Global title bar on all screens, screen name in DEBUG banner
All checks were successful
check / check (push) Successful in 14s
Details

Browse Source 
Move "AutistMask by @sneak" to a global title bar that appears
on every screen. Per-view headings demoted to h2 sub-headings.
Settings button moved to bottom of main view alongside Add
wallet. In DEBUG mode, the red banner now shows the current
screen name in parentheses (e.g. "DEBUG / INSECURE (main)").
This commit is contained in:
Jeffrey Paul
2026-02-25 18:38:33 +07:00
parent 1c9d5a9f2d
commit 64bd541013
2 changed files with 38 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/popup/index.html
View File

@@ -8,12 +8,24 @@
</head>
<body class="bg-bg text-fg font-mono text-sm">
<div id="app" class="p-2">
<!-- ============ GLOBAL TITLE BAR ============ -->
<div
class="flex justify-between items-center border-b border-border pb-1 mb-2"
>
<h1>
<span class="font-bold">AutistMask</span> by
<a
href="https://sneak.berlin"
target="_blank"
class="underline decoration-dashed"
>@sneak</a
>
</h1>
</div>
<!-- ============ WELCOME / FIRST USE ============ -->
<div id="view-welcome" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3">
Welcome to AutistMask
</h1>
<p class="mb-3">To get started, add a wallet.</p>
<p class="mb-3">Welcome! To get started, add a wallet.</p>
<button
id="btn-welcome-add"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -24,9 +36,7 @@
<!-- ============ ADD WALLET (unified create/import) ============ -->
<div id="view-add-wallet" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3">
Add Wallet
</h1>
<h2 class="font-bold mb-2">Add Wallet</h2>
<p class="mb-2">
Enter your 12 or 24 word recovery phrase below, or click the
button to roll the die for a new one.
@@ -108,9 +118,7 @@
<!-- ============ IMPORT PRIVATE KEY ============ -->
<div id="view-import-key" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3">
Import Private Key
</h1>
<h2 class="font-bold mb-2">Import Private Key</h2>
<p class="mb-2">
Paste your private key below. This wallet will have a single
address.
@@ -165,38 +173,22 @@
<!-- ============ MAIN VIEW: ALL WALLETS & ADDRESSES ============ -->
<div id="view-main" class="view hidden">
<div
class="flex justify-between items-center border-b border-border pb-1 mb-2"
>
<h1>
<span class="font-bold">AutistMask</span> by
<a
href="https://sneak.berlin"
target="_blank"
class="underline decoration-dashed"
>@sneak</a
>
</h1>
<button
id="btn-settings"
class="border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer"
title="Settings"
>
Settings
</button>
</div>
<!-- wallet list -->
<div id="wallet-list"></div>
<!-- add wallet button -->
<div class="mt-3 border-t border-border pt-2">
<div class="mt-3 border-t border-border pt-2 flex gap-2">
<button
id="btn-main-add-wallet"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
+ Add wallet
</button>
<button
id="btn-settings"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Settings
</button>
</div>
</div>
@@ -205,7 +197,7 @@
<div
class="flex justify-between items-center border-b border-border pb-1 mb-2"
>
<h1 class="font-bold" id="address-title">Address</h1>
<h2 class="font-bold" id="address-title">Address</h2>
<button
id="btn-address-back"
class="border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -275,7 +267,7 @@
<!-- ============ SEND ============ -->
<div id="view-send" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3">Send</h1>
<h2 class="font-bold mb-2">Send</h2>
<div class="mb-2">
<label class="block mb-1">What to send</label>
<select
@@ -340,9 +332,7 @@
<!-- ============ RECEIVE ============ -->
<div id="view-receive" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3">
Receive
</h1>
<h2 class="font-bold mb-2">Receive</h2>
<p class="mb-2">
Share this address with the sender. Make sure you only use
this address to receive Ethereum tokens.
@@ -372,9 +362,7 @@
<!-- ============ ADD TOKEN ============ -->
<div id="view-add-token" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3">
Add Token
</h1>
<h2 class="font-bold mb-2">Add Token</h2>
<p class="mb-2">
Enter the contract address of the token you want to track.
You can find this on the token's page on Etherscan.
@@ -423,9 +411,7 @@
<!-- ============ SETTINGS ============ -->
<div id="view-settings" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3">
Settings
</h1>
<h2 class="font-bold mb-2">Settings</h2>
<h2 class="font-bold mb-1">Network</h2>
<p class="text-xs text-muted mb-1">
@@ -458,9 +444,7 @@
<!-- ============ APPROVAL ============ -->
<div id="view-approve" class="view hidden">
<h1 class="font-bold border-b border-border pb-1 mb-3">
A website is requesting access
</h1>
<h2 class="font-bold mb-2">A website is requesting access</h2>
<div class="mb-2">
<div class="text-xs text-muted mb-1">
From:

7
src/popup/index.js
View File

@@ -37,6 +37,12 @@ function showView(name) {
el.classList.toggle("hidden", v !== name);
}
}
if (DEBUG) {
const banner = document.getElementById("debug-banner");
if (banner) {
banner.textContent = "DEBUG / INSECURE (" + name + ")";
}
}
}
// Browser-agnostic storage API
@@ -373,6 +379,7 @@ function backFromWalletAdd() {
async function init() {
if (DEBUG) {
const banner = document.createElement("div");
banner.id = "debug-banner";
banner.textContent = "DEBUG / INSECURE";
banner.style.cssText =
"background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;";