From 0f3c238762e98b3678f1bf100a0fe089f3778819 Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Fri, 26 Sep 2025 17:47:48 -0700
Subject: [PATCH] Fix: Improve URL validation and UI layout

---
 index.html | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 120e491..9e55ca2 100644
--- a/index.html
+++ b/index.html
@@ -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()},