multipleof4/4ev.link
1
0
Fork 0
mirror of https://github.com/multipleof4/4ev.link.git synced 2026-01-13 15:57:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Improve URL validation and UI layout

Browse Source
This commit is contained in:
multipleof4
2025-09-26 17:47:48 -07:00
parent 3a328501bb
commit 0f3c238762
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@@ -70,8 +70,10 @@ a{color:inherit}
<section class="hero">
<h1 class="h1">Get your 4ev.link <span style="color:crimson">❤</span></h1>
<div class="form" @submit.prevent>
<input class="input" x-model="url" type="url" inputmode="url" placeholder="Paste a long URL, e.g. https://example.com/very/long/link" aria-label="Long URL" @keydown.enter.prevent="shorten()">
<button class="btn" @click="shorten()" :disabled="busy" x-text="busy?'Working…':'Link'"></button>
<div class="row">
<input class="input" x-model="url" type="url" inputmode="url" placeholder="Paste a long URL, e.g. https://example.com/very/long/link" aria-label="Long URL" @keydown.enter.prevent="shorten()">
<button class="btn" @click="shorten()" :disabled="busy" x-text="busy?'Working…':'Link'"></button>
</div>
<div class="row" style="justify-content:space-between">
<span class="note">Free tier: randomized links, basic usage. No login required.</span>
<span class="kbd">Enter ↵</span>
@@ -105,8 +107,8 @@ a{color:inherit}
<section>
<div class="row" style="justify-content:space-between;align-items:center;margin:0 auto 8px;max-width:760px">
<h3 style="margin:0;font-size:16px">Recent on this device</h3>
<span class="note" x-show="!links.length">No links yet</span>
<h3 style="margin:0;font-size:16px" x-show="links.length" x-cloak>Recent on this device</h3>
<span class="note" x-show="!links.length" x-cloak>No links yet</span>
</div>
<div class="list">
<template x-for="(l,i) in links" :key="l.slug">
@@ -138,7 +140,7 @@ a{color:inherit}
</div>
</section>
<footer class="footer" style="justify-content:center">
<footer class="footer">
<div style="display:flex;gap:10px;align-items:center">
<i data-lucide="globe" style="width:16px;height:16px"></i>
<span>© <span x-text="new Date().getFullYear()"></span> 4ev.link</span>
@@ -154,7 +156,7 @@ init(){document.documentElement.setAttribute('data-theme',this.t);this.freshIcon
setTheme(v){this.t=v;localStorage.setItem('theme',v);document.documentElement.setAttribute('data-theme',v);this.freshIcons()},
toggleTheme(){this.setTheme(this.t==='light'?'dark':'light')},
val(u){try{new URL(u);return 1}catch(e){return 0}},
async shorten(){if(this.busy||!this.val(this.url))return this.toast('Enter a valid URL');this.busy=1;this.freshIcons();try{const r=await fetch('/',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:this.url.trim()})});if(!r.ok)throw'';const d=await r.json();this.short=d.shortUrl;this.links.unshift({slug:d.slug,target:d.target,created:Date.now()});this.links.splice(20);localStorage.setItem('4ev.links',JSON.stringify(this.links));this.url='';this.toast('Link created')}catch(e){this.toast('Failed to shorten link')}finally{this.busy=0;this.freshIcons()}},
async shorten(){let u=this.url.trim();if(!/^https?:\/\//.test(u))u='https://'+u;if(this.busy||!this.val(u))return this.toast('Enter a valid URL');this.busy=1;this.freshIcons();try{const r=await fetch('/',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:u})});if(!r.ok)throw'';const d=await r.json();this.short=d.shortUrl;this.links.unshift({slug:d.slug,target:d.target,created:Date.now()});this.links.splice(20);localStorage.setItem('4ev.links',JSON.stringify(this.links));this.url='';this.toast('Link created')}catch(e){this.toast('Failed to shorten link')}finally{this.busy=0;this.freshIcons()}},
copy(txt){navigator.clipboard?.writeText(txt).then(()=>this.toast('Copied')).catch(()=>{let t=document.createElement('textarea');t.value=txt;document.body.appendChild(t);t.select();document.execCommand('copy');t.remove();this.toast('Copied')})},
toast(m){this.msg=m;this.freshIcons();clearTimeout(this._to);this._to=setTimeout(()=>this.msg='',2000)},
del(i){this.links.splice(i,1);localStorage.setItem('4ev.links',JSON.stringify(this.links));this.freshIcons()},