Skip to content

Commit 833eb14

Browse files
HKTITANHKTITAN
committed
Enhance brand link interaction in 404, index, and QR pages with hover effects. Update HTML structure for brand links to improve accessibility and user experience. Add detailed file structure comments in index.html for better maintainability.
1 parent 093034b commit 833eb14

4 files changed

Lines changed: 108 additions & 36 deletions

File tree

‎.cursor/rules/project-overview.mdc‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,15 @@ kheMessage is a minimal, in-browser text editor that stores everything in the UR
3535

3636
```
3737
kheMessage/
38-
├── index.html # Main app (single-file)
38+
├── index.html # Main app (single-file: CSS + HTML + JS)
39+
│ └── Sections: reset/themes → layout/components → block model → compression → encryption → UI → init
3940
├── qr.html # Full-page QR code view
41+
├── 404.html # Fallback (Vercel/GitHub Pages)
4042
├── qrcode.js # QR code generation library
4143
├── sw.js # Service worker for PWA
4244
├── manifest.json # PWA manifest
43-
├── 404.html # GitHub Pages fallback
45+
├── vercel.json # Vercel deployment config
46+
├── .github/workflows/ # CI (Vercel deploy)
4447
└── windows_11_cursors_concept_by_jepricreations_densjkc/
4548
├── light/ # Light theme cursors
4649
└── dark/ # Dark theme cursors

‎404.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,13 @@
6363

6464
#brand a:hover { color: var(--text-muted); }
6565

66+
#brand .brand-link { display: inline-block; position: relative; min-width: 6.5em; }
67+
#brand .brand-link .brand-default,
68+
#brand .brand-link .brand-hover { display: inline-block; transition: opacity 0.25s ease, transform 0.25s ease; }
69+
#brand .brand-link .brand-hover { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(4px); }
70+
#brand .brand-link:hover .brand-default { opacity: 0; transform: translateY(-4px); }
71+
#brand .brand-link:hover .brand-hover { opacity: 1; transform: translateY(0); }
72+
6673
h1 {
6774
font-size: 2em;
6875
font-weight: 400;
@@ -84,7 +91,7 @@
8491
a:hover { border-bottom-color: var(--link); }
8592
</style>
8693
<body>
87-
<header id="brand"><a href="https://khe.money">kheMessage</a></header>
94+
<header id="brand"><a href="https://khe.money" class="brand-link" aria-label="kheMessage — msg.khe.money" title="msg.khe.money"><span class="brand-default" aria-hidden="true">kheMessage</span><span class="brand-hover" aria-hidden="true">msg.khe.money</span></a></header>
8895
<h1>404</h1>
8996
<p>This page doesn’t exist.</p>
9097
<a href="/">Back to kheMessage</a>

‎index.html‎

Lines changed: 87 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
<!DOCTYPE html>
2+
<!--
3+
kheMessage — https://msg.khe.money
4+
FILE STRUCTURE:
5+
- Lines 1–10: DOCTYPE, meta, links, title
6+
- Lines 11–~800: <style> — Reset, themes, layout, components, responsive
7+
- Lines ~800–1800: <header>, <main>, <aside> — HTML structure
8+
- Lines ~1800–4400: <script> — Block model, compression, encryption, UI logic, init
9+
-->
210
<meta charset="utf-8">
311
<meta name="viewport" content="width=device-width, initial-scale=1">
412
<meta name="theme-color" content="#fafaf9" id="theme-color-meta">
@@ -181,30 +189,32 @@
181189
gap: 10px;
182190
}
183191

184-
#brand .github-icon {
185-
display: flex;
186-
align-items: center;
187-
justify-content: center;
188-
width: 36px;
189-
height: 36px;
190-
padding: 0;
191-
border-radius: 50%;
192-
color: var(--text);
193-
transition: color 0.15s ease, background 0.15s ease;
194-
-webkit-tap-highlight-color: transparent;
195-
touch-action: manipulation;
192+
/* Brand hover morph: kheMessage → msg.khe.money */
193+
#brand .brand-link {
194+
display: inline-block;
195+
position: relative;
196+
min-width: 6.5em;
196197
}
197-
198-
#brand .github-icon:focus-visible {
199-
outline: 2px solid var(--outline);
200-
outline-offset: 2px;
198+
#brand .brand-link .brand-default,
199+
#brand .brand-link .brand-hover {
200+
display: inline-block;
201+
transition: opacity 0.25s ease, transform 0.25s ease;
201202
}
202-
203-
#brand .github-icon:hover {
204-
color: var(--text-muted);
203+
#brand .brand-link .brand-hover {
204+
position: absolute;
205+
left: 0;
206+
top: 0;
207+
opacity: 0;
208+
transform: translateY(4px);
209+
}
210+
#brand .brand-link:hover .brand-default {
211+
opacity: 0;
212+
transform: translateY(-4px);
213+
}
214+
#brand .brand-link:hover .brand-hover {
215+
opacity: 1;
216+
transform: translateY(0);
205217
}
206-
207-
#brand .github-icon svg { width: 18px; height: 18px; }
208218

209219
#save-btn {
210220
min-width: 64px;
@@ -312,6 +322,13 @@
312322

313323
#brand .nav-btn svg { width: 18px; height: 18px; }
314324

325+
#lock-btn .lock-icon-open { display: block; }
326+
#lock-btn .lock-icon-closed { display: none; }
327+
#lock-btn.is-locked .lock-icon-open { display: none; }
328+
#lock-btn.is-locked .lock-icon-closed { display: block; }
329+
#lock-btn.is-locked { color: var(--outline); }
330+
#lock-btn.is-locked:hover { background: var(--btn-hover); color: var(--outline); }
331+
315332
#brand .nav-dropdown {
316333
position: absolute;
317334
top: 100%;
@@ -642,12 +659,14 @@
642659
font-size: 1.1rem;
643660
}
644661

645-
#theme-toggle {
662+
#theme-toggle,
663+
#lock-btn {
646664
width: 32px;
647665
height: 32px;
648666
}
649667

650-
#theme-toggle svg {
668+
#theme-toggle svg,
669+
#lock-btn svg {
651670
width: 16px;
652671
height: 16px;
653672
}
@@ -1390,6 +1409,37 @@
13901409
}
13911410

13921411
/* Status bar */
1412+
#status-bar .status-bar-github {
1413+
display: flex;
1414+
align-items: center;
1415+
justify-content: center;
1416+
width: 28px;
1417+
height: 28px;
1418+
padding: 0;
1419+
border: 1px solid var(--btn-border);
1420+
border-radius: 50%;
1421+
background: var(--btn-bg);
1422+
color: var(--text);
1423+
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
1424+
-webkit-tap-highlight-color: transparent;
1425+
touch-action: manipulation;
1426+
}
1427+
#status-bar .status-bar-github:focus-visible {
1428+
outline: 2px solid var(--outline);
1429+
outline-offset: 2px;
1430+
}
1431+
#status-bar .status-bar-github:hover {
1432+
background: var(--btn-hover);
1433+
border-color: var(--border);
1434+
}
1435+
#status-bar .status-bar-github:active {
1436+
transform: scale(0.96);
1437+
}
1438+
#status-bar .status-bar-github svg {
1439+
width: 16px;
1440+
height: 16px;
1441+
}
1442+
13931443
#status-bar {
13941444
position: fixed;
13951445
bottom: 0;
@@ -1575,10 +1625,7 @@
15751625
</style>
15761626
<header id="brand" class="noprint">
15771627
<div class="brand-left">
1578-
<a href="https://khe.money">kheMessage</a>
1579-
<a href="https://github.com/HKTITAN/kheMessage" target="_blank" rel="noopener" class="github-icon" aria-label="GitHub">
1580-
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0c-2.4-1.6-3.5-1.3-3.5-1.3a4.2 4.2 0 0 0-.1 3.2a4.6 4.6 0 0 0-1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2v3.5"/></svg>
1581-
</a>
1628+
<a href="https://khe.money" class="brand-link" aria-label="kheMessage — msg.khe.money" title="msg.khe.money"><span class="brand-default" aria-hidden="true">kheMessage</span><span class="brand-hover" aria-hidden="true">msg.khe.money</span></a>
15821629
</div>
15831630
<div class="nav-actions">
15841631
<button type="button" id="save-btn" aria-label="Save" title="Save (Ctrl+S)"><span id="save-btn-text">Save</span></button>
@@ -1615,9 +1662,12 @@
16151662
<a href="#" id="share-export-txt" role="menuitem">Export TXT</a>
16161663
<a href="#" id="share-export-html" role="menuitem">Export HTML</a>
16171664
<a href="#" id="share-export-md" role="menuitem">Export MD</a>
1618-
<button type="button" id="share-lock" class="share-dropdown-btn" role="menuitem">Lock with password</button>
16191665
</div>
16201666
</div>
1667+
<button type="button" id="lock-btn" class="nav-btn" aria-label="Lock note with password" title="Lock note with password">
1668+
<svg class="lock-icon-open" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 11V7a4 4 0 1 1 8 0"/><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/></svg>
1669+
<svg class="lock-icon-closed" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
1670+
</button>
16211671
<button type="button" id="theme-toggle" class="nav-btn" aria-label="Toggle light/dark mode">
16221672
<svg class="icon-sun" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
16231673
<svg class="icon-moon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
@@ -1776,6 +1826,9 @@ <h4 id="size-tooltip-title">Document is getting large</h4>
17761826

17771827
<!-- Status Bar -->
17781828
<div id="status-bar" class="noprint">
1829+
<a href="https://github.com/HKTITAN/kheMessage" target="_blank" rel="noopener" class="github-icon status-bar-github" aria-label="GitHub">
1830+
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0c-2.4-1.6-3.5-1.3-3.5-1.3a4.2 4.2 0 0 0-.1 3.2a4.6 4.6 0 0 0-1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2v3.5"/></svg>
1831+
</a>
17791832
<div id="size-progress" title="URL size">
17801833
<div id="size-progress-fill" class="safe"></div>
17811834
</div>
@@ -3887,8 +3940,11 @@ <h4 id="size-tooltip-title">Document is getting large</h4>
38873940
}
38883941

38893942
function updateLockButtonVisibility() {
3890-
const lockBtn = document.getElementById('share-lock')
3891-
if (lockBtn) lockBtn.style.display = encryptedContent ? 'none' : ''
3943+
const lockBtn = document.getElementById('lock-btn')
3944+
if (!lockBtn) return
3945+
lockBtn.classList.toggle('is-locked', !!encryptedContent)
3946+
lockBtn.setAttribute('aria-label', encryptedContent ? 'Note is locked. Unlock via the banner above.' : 'Lock note with password')
3947+
lockBtn.title = encryptedContent ? 'Note is locked. Unlock via the banner above.' : 'Lock note with password'
38923948
}
38933949

38943950
function updateUnlockBannerText() {
@@ -4161,8 +4217,7 @@ <h4 id="size-tooltip-title">Document is getting large</h4>
41614217
closeAllDropdowns()
41624218
})
41634219

4164-
const lockBtn = document.getElementById('share-lock')
4165-
lockBtn?.addEventListener('click', e => {
4220+
document.getElementById('lock-btn')?.addEventListener('click', e => {
41664221
e.preventDefault()
41674222
if (encryptedContent) return
41684223
if (!window.crypto?.subtle) {

‎qr.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,13 @@
4949
#brand a:hover { color: rgba(235, 235, 235, 0.65); }
5050
}
5151

52+
#brand .brand-link { display: inline-block; position: relative; min-width: 6.5em; }
53+
#brand .brand-link .brand-default,
54+
#brand .brand-link .brand-hover { display: inline-block; transition: opacity 0.25s ease, transform 0.25s ease; }
55+
#brand .brand-link .brand-hover { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(4px); }
56+
#brand .brand-link:hover .brand-default { opacity: 0; transform: translateY(-4px); }
57+
#brand .brand-link:hover .brand-hover { opacity: 1; transform: translateY(0); }
58+
5259
body {
5360
font-family: "Instrument Serif", Georgia, serif;
5461
display: flex;
@@ -90,7 +97,7 @@
9097

9198
a:hover { border-bottom-color: var(--link); }
9299
</style>
93-
<header id="brand"><a href="https://khe.money">kheMessage</a></header>
100+
<header id="brand"><a href="https://khe.money" class="brand-link" aria-label="kheMessage — msg.khe.money" title="msg.khe.money"><span class="brand-default" aria-hidden="true">kheMessage</span><span class="brand-hover" aria-hidden="true">msg.khe.money</span></a></header>
94101
<div id="qrcode"></div>
95102
<a id="link" href="/">Back to kheMessage</a>
96103

0 commit comments

Comments
 (0)