thistine/Snip
1
0
Fork 0
mirror of https://github.com/ThisTine/Snip.git synced 2026-08-18 23:18:47 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: improve ui

Browse Source
This commit is contained in:
sittichok Ouamsiri
2026-07-26 14:56:21 +07:00
parent e177c7775a
commit e2327207e5
14 changed files with 333 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/internal/httpx/redirect/notfound.go
+21 -9
View File
@@ -8,16 +8,28 @@ func notFoundHTML(shortHost, homeURL string) string {
href := html.EscapeString(homeURL)
return `<!doctype html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#fbfbfa" media="(prefers-color-scheme:light)">
<meta name="theme-color" content="#09090b" media="(prefers-color-scheme:dark)">
<title>Link not found</title><style>
:root{--bg:#f4f2ea;--surface:#fffdf7;--ink:#16170f;--muted:#6b6c5e;--line:#e2decf;--accent:#c6f24e}
@media(prefers-color-scheme:dark){:root{--bg:#0e100a;--surface:#181b11;--ink:#f1efe3;--muted:#9b9d8a;--line:#2c3020}}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--ink);
font-family:ui-sans-serif,system-ui,sans-serif;text-align:center;padding:24px}
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:24px;padding:36px;max-width:360px}
h1{font-size:54px;margin:0;letter-spacing:-.03em}
p{color:var(--muted);margin:8px 0 20px}
a{display:inline-block;background:var(--accent);color:#16170f;text-decoration:none;font-weight:600;
padding:12px 20px;border-radius:14px}
:root{--bg:#fbfbfa;--surface:#fff;--ink:#18181b;--muted:#71717a;--line:#e9e9eb;
--grad-from:#2563eb;--grad-to:#7c3aed;--grad-ink:#fff;--glow-1:rgba(37,99,235,.16);--glow-2:rgba(124,58,237,.14)}
@media(prefers-color-scheme:dark){:root{--bg:#09090b;--surface:#111113;--ink:#fafafa;--muted:#a1a1aa;--line:#232327;
--grad-from:#60a5fa;--grad-to:#a78bfa;--grad-ink:#09090b;--glow-1:rgba(96,165,250,.13);--glow-2:rgba(167,139,250,.12)}}
body{margin:0;min-height:100vh;display:grid;place-items:center;background-color:var(--bg);color:var(--ink);
font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;
text-align:center;padding:20px;
background-image:radial-gradient(60% 45% at 12% 0%,var(--glow-1),transparent 70%),
radial-gradient(55% 40% at 92% 100%,var(--glow-2),transparent 70%);
background-attachment:fixed;background-repeat:no-repeat}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px;width:100%;max-width:360px}
h1{font-size:44px;font-weight:600;margin:0;letter-spacing:-.03em;
background-image:linear-gradient(135deg,var(--grad-from),var(--grad-to));
-webkit-background-clip:text;background-clip:text;color:transparent}
p{color:var(--muted);font-size:14px;line-height:1.5;margin:8px 0 20px}
a{display:block;background-image:linear-gradient(135deg,var(--grad-from),var(--grad-to));color:var(--grad-ink);
text-decoration:none;font-size:15px;font-weight:500;
padding:13px 20px;border-radius:12px;transition:opacity .15s}
a:hover{opacity:.9}
</style></head><body><div class="card"><h1>404</h1>
<p>This short link doesn't exist or was removed.</p>
<a href="` + href + `">Go to ` + h + `</a></div></body></html>`
backend/internal/httpx/redirect/pin_page.go
+67 -37
View File
@@ -14,51 +14,76 @@ type pinData struct {
}
// The page is fully self-contained (no external CSS/JS/fonts) so it paints in a
// single round trip — the redirect path must stay fast. It mirrors the snip
// look: warm paper + ink, electric-lime accent, with a dark-mode variant.
// single round trip — the redirect path must stay fast. Palette and radii mirror
// src/index.css so it reads as the same product; dark mode follows the OS since
// there is no app shell (and so no theme toggle) on this route.
var pinTmpl = template.Must(template.New("pin").Parse(`<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#16170f">
<meta name="theme-color" content="#fbfbfa" media="(prefers-color-scheme:light)">
<meta name="theme-color" content="#09090b" media="(prefers-color-scheme:dark)">
<meta name="robots" content="noindex">
<title>Enter PIN · {{.ShortHost}}/{{.Code}}</title>
<style>
:root{--bg:#f4f2ea;--surface:#fffdf7;--ink:#16170f;--muted:#6b6c5e;--line:#e2decf;--accent:#c6f24e;--accent-ink:#16170f}
@media (prefers-color-scheme:dark){:root{--bg:#0e100a;--surface:#181b11;--ink:#f1efe3;--muted:#9b9d8a;--line:#2c3020;--accent:#c6f24e}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;
background:var(--bg);color:var(--ink);
:root{--bg:#fbfbfa;--surface:#fff;--surface-2:#f4f4f5;--ink:#18181b;--muted:#71717a;
--line:#e9e9eb;--accent:#2563eb;--accent-soft:rgba(37,99,235,.1);--danger:#dc2626;
--grad-from:#2563eb;--grad-to:#7c3aed;--grad-ink:#fff;
--glow-1:rgba(37,99,235,.16);--glow-2:rgba(124,58,237,.14)}
@media(prefers-color-scheme:dark){:root{--bg:#09090b;--surface:#111113;--surface-2:#19191c;--ink:#fafafa;
--muted:#a1a1aa;--line:#232327;--accent:#60a5fa;--accent-soft:rgba(96,165,250,.14);--danger:#f87171;
--grad-from:#60a5fa;--grad-to:#a78bfa;--grad-ink:#09090b;
--glow-1:rgba(96,165,250,.13);--glow-2:rgba(167,139,250,.12)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:20px;
background-color:var(--bg);color:var(--ink);
font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
background-image:radial-gradient(60% 50% at 12% 8%,rgba(198,242,78,.30),transparent 60%),radial-gradient(60% 50% at 90% 90%,rgba(198,242,78,.22),transparent 60%)}
.card{width:100%;max-width:380px;background:var(--surface);border:1.5px solid var(--line);
border-radius:24px;padding:28px;box-shadow:0 30px 80px -30px rgba(0,0,0,.45);
animation:pop .45s cubic-bezier(.2,.9,.25,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.lock{width:48px;height:48px;border-radius:16px;background:var(--ink);display:grid;place-items:center;margin-bottom:18px}
.lock svg{width:24px;height:24px}
h1{font-size:24px;margin:0 0 6px;letter-spacing:-.02em}
p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.5}
p b{color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pins{display:flex;gap:8px;margin-bottom:14px}
.pins input{flex:1;width:100%;height:54px;text-align:center;font-size:22px;font-weight:700;
-webkit-font-smoothing:antialiased;
background-image:radial-gradient(60% 45% at 12% 0%,var(--glow-1),transparent 70%),
radial-gradient(55% 40% at 92% 100%,var(--glow-2),transparent 70%);
background-attachment:fixed;background-repeat:no-repeat}
.card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);
border-radius:16px;padding:24px;animation:rise .3s ease-out}
@media(min-width:420px){.card{padding:28px}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lock{width:40px;height:40px;border-radius:12px;color:var(--grad-ink);
background-image:linear-gradient(135deg,var(--grad-from),var(--grad-to));
display:grid;place-items:center;margin-bottom:16px}
.lock svg{width:20px;height:20px}
h1{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
h1 span{background-image:linear-gradient(135deg,var(--grad-from),var(--grad-to));
-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.5}
.sub b{color:var(--ink);font-weight:500;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.pins{display:flex;gap:6px}
@media(min-width:420px){.pins{gap:8px}}
.pins input{flex:1;min-width:0;height:52px;padding:0;text-align:center;font-size:20px;font-weight:600;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);
background:var(--bg);border:1.5px solid var(--line);border-radius:14px;outline:none;transition:transform .12s,border-color .12s}
.pins input:focus{transform:translateY(-2px) scale(1.05);border-color:var(--accent)}
.err{color:#ef4444;font-size:13px;font-weight:600;margin:0 0 14px;min-height:18px}
button{width:100%;height:52px;border:0;border-radius:16px;background:var(--accent);color:var(--accent-ink);
font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px -8px rgba(198,242,78,.6);transition:transform .12s}
button:active{transform:scale(.96)}
.foot{margin-top:16px;text-align:center;font-size:12px;color:var(--muted)}
.foot b{color:var(--ink)}
background:var(--surface-2);border:1px solid var(--line);border-radius:12px;outline:none;
transition:border-color .15s,box-shadow .15s}
.pins input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.err{color:var(--danger);font-size:13px;font-weight:500;margin:10px 0 0;min-height:19px}
form.bad .pins input{border-color:var(--danger)}
form.bad .pins{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
button{width:100%;height:48px;margin-top:14px;border:0;border-radius:12px;
background-image:linear-gradient(135deg,var(--grad-from),var(--grad-to));color:var(--grad-ink);
font-size:15px;font-weight:500;font-family:inherit;
cursor:pointer;transition:opacity .15s,transform .1s}
button:hover{opacity:.9}
button:active{transform:scale(.99)}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.foot{margin-top:18px;text-align:center;font-size:12px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
</style>
</head>
<body>
<div class="card">
<div class="lock"><svg viewBox="0 0 24 24" fill="none"><rect x="4" y="10" width="16" height="11" rx="3" fill="#c6f24e"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="#c6f24e" stroke-width="2.4" fill="none"/><circle cx="12" cy="15.5" r="1.7" fill="#16170f"/></svg></div>
<h1>This link is protected</h1>
<p>Enter the 6-digit PIN to continue to <b>{{.ShortHost}}/{{.Code}}</b>.</p>
<form method="post" action="{{.ActionPath}}" id="f" autocomplete="off">
<div class="lock"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></div>
<h1>This link is <span>protected</span></h1>
<p class="sub">Enter the 6-digit PIN to continue to <b>{{.ShortHost}}/{{.Code}}</b>.</p>
<form method="post" action="{{.ActionPath}}" id="f" autocomplete="off"{{if .HasError}} class="bad"{{end}}>
<div class="pins" id="pins">
<input inputmode="numeric" maxlength="1" aria-label="PIN digit 1" required>
<input inputmode="numeric" maxlength="1" aria-label="PIN digit 2" required>
@@ -67,31 +92,36 @@ button:active{transform:scale(.96)}
<input inputmode="numeric" maxlength="1" aria-label="PIN digit 5" required>
<input inputmode="numeric" maxlength="1" aria-label="PIN digit 6" required>
</div>
<p class="err">{{if .HasError}}That PIN didn't match. Try again.{{end}}</p>
<p class="err" role="alert">{{if .HasError}}That PIN didn't match. Try again.{{end}}</p>
<input type="hidden" name="pin" id="pin">
<button type="submit">Unlock &rarr;</button>
<button type="submit">Unlock</button>
</form>
<div class="foot">Secured by <b>{{.ShortHost}}</b></div>
<div class="foot">{{.ShortHost}}</div>
</div>
<script>
(function(){
var boxes=[].slice.call(document.querySelectorAll('#pins input')),hidden=document.getElementById('pin'),f=document.getElementById('f');
function sync(){hidden.value=boxes.map(function(b){return b.value}).join('')}
// Clear the error styling as soon as the visitor starts a fresh attempt.
function fresh(){f.className=''}
boxes.forEach(function(b,i){
b.addEventListener('input',function(){
fresh();
b.value=b.value.replace(/\D/g,'').slice(0,1);
if(b.value&&i<boxes.length-1)boxes[i+1].focus();
sync();
if(hidden.value.length===6)f.submit();
});
b.addEventListener('keydown',function(e){if(e.key==='Backspace'&&!b.value&&i>0)boxes[i-1].focus()});
b.addEventListener('focus',function(){b.select()});
b.addEventListener('keydown',function(e){if(e.key==='Backspace'&&!b.value&&i>0){boxes[i-1].focus();fresh()}});
b.addEventListener('paste',function(e){
var d=(e.clipboardData.getData('text')||'').replace(/\D/g,'').slice(0,6);
if(!d)return;e.preventDefault();
if(!d)return;e.preventDefault();fresh();
d.split('').forEach(function(c,j){if(boxes[j])boxes[j].value=c});
boxes[Math.min(d.length,5)].focus();sync();if(d.length===6)f.submit();
});
});
f.addEventListener('submit',sync);
if(boxes[0])boxes[0].focus();
})();
</script>