Feat: Minimal mobile-first landing page

2026-01-13 15:57:53 +00:00 · 2025-09-26 18:57:51 -07:00
parent 28f82c3b70
commit 8ad845c498
1 changed files with 105 additions and 151 deletions
--- a/index.html
+++ b/index.html
@@ -1,168 +1,122 @@
-<!doctype html><html lang=en>
+<!doctype html><html lang="en">
 <head>
-<meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover">
-<title>4ev.link — simple, fast URL shortener</title>
-<meta name=description content="Get your 4ev.link in seconds. Free, no account needed. Pro custom URLs coming soon.">
-<meta property=og:title content="4ev.link — simple, fast URL shortener">
-<meta property=og:description content="Free works. No account needed. Pro custom slugs (coming soon).">
-<meta property=og:type content=website><meta property=og:url content="https://4ev.link/">
-<meta name=color-scheme content=light only>
-<link rel=preconnect href=https://fonts.googleapis.com><link rel=preconnect href=https://fonts.gstatic.com crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&family=JetBrains+Mono:wght@500&display=swap" rel=stylesheet>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name="theme-color" content="#ffffff">
+<title>4ev.link — Shorten URLs, fast</title>
+<meta name="description" content="Get your 4ev.link ❤️ Free, no account needed. Custom URLs coming soon. Mobile-first, Cloudflare-inspired.">
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Sora:wght@700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
 <style>
-:root{--bg:#fff;--fg:#111;--mut:#6b7280;--card:#f7f7f7;--bor:#e5e7eb;--ink:#111;--acc:#111;--heart:#e11d48}
-*{box-sizing:border-box}html,body{height:100%}body{margin:0;font:16px/1.4 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;background:#fff;color:var(--fg);-webkit-font-smoothing:antialiased}
-a{color:var(--ink);text-decoration:none}a:hover{text-decoration:underline}
-.container{max-width:960px;margin:0 auto;padding:20px}
-.header{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
-.brand{display:flex;gap:10px;align-items:center;font-weight:700}
-.brand i{width:22px;height:22px}
-.brand span{font-family:Poppins,Inter,sans-serif;letter-spacing:.2px}
-.nav{display:flex;gap:8px;align-items:center}
-.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--bor);border-radius:10px;background:#fff;color:#111;font-weight:600;cursor:pointer;transition:.15s}
-.btn:hover{transform:translateY(-1px)}
-.btn.primary{background:#111;color:#fff;border-color:#111}
-.btn.ghost{background:#fff}
-.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
-.hero{padding:36px 0 10px;text-align:center}
-.hero h1{margin:0 auto 8px;font:700 clamp(24px,5.5vw,44px)/1.1 Poppins,Inter,sans-serif;letter-spacing:.2px}
-.sub{color:var(--mut);font-weight:500}
-.panel{margin:18px auto;padding:16px;border:1px solid var(--bor);border-radius:14px;background:var(--card)}
-.form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
-@media (max-width:640px){.form{grid-template-columns:1fr}.brand span{font-size:16px}.brand i{width:20px;height:20px}}
-.input{width:100%;padding:12px 14px;border:1px solid var(--bor);border-radius:10px;background:#fff;outline:none}
-.input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}
-.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-.meta{font-size:13px;color:var(--mut)}
-.kbd{font:500 13px JetBrains Mono,monospace;background:#fff;border:1px solid var(--bor);border-radius:6px;padding:2px 6px}
-.hr{height:1px;background:var(--bor);margin:18px 0;border:0}
-.card{background:#fff;border:1px solid var(--bor);border-radius:14px;padding:16px}
-.grid{display:grid;gap:10px}
-@media(min-width:720px){.grid.cols-2{grid-template-columns:1fr 1fr}.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
-.mono{font:600 14px/1.3 JetBrains Mono,monospace}
-.badge{display:inline-flex;gap:6px;align-items:center;font:600 12px/1 Inter;border:1px solid var(--bor);border-radius:999px;padding:6px 10px;background:#fff;color:#111}
-.footer{padding:24px 0 40px;color:var(--mut);text-align:center}
-.note{font-size:13px;color:var(--mut)}
-.copy{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
-h2{margin:0 0 8px;font:700 18px/1.2 Poppins,Inter,sans-serif}
-ul{margin:0;padding-left:18px}li{margin:6px 0}
-.small{font-size:12px;color:var(--mut)}
+:root{--bg:#fff;--fg:#0a0a0a;--mut:#6b7280;--line:#e5e7eb;--soft:#f7f7f8;--sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;--disp:'Sora',var(--sans);--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
+*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.35 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
+a{color:inherit;text-decoration:none}button{font:inherit}input{font:inherit}
+[x-cloak]{display:none!important}
+.wrap{min-height:100svh;display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px}
+.nav{width:100%;max-width:720px;display:flex;align-items:center;justify-content:space-between;padding:8px 4px}
+.logo{display:flex;align-items:center;gap:8px;font-weight:700}
+.badge{font-size:11px;padding:2px 6px;border:1px solid var(--line);border-radius:999px;color:var(--mut);background:var(--soft)}
+.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#111;cursor:pointer;transition:.15s ease;box-shadow:0 1px 0 rgba(0,0,0,.03)}
+.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.07)}
+.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
+.ghost{background:transparent}
+.hero{width:100%;max-width:720px;text-align:center;margin-top:4px}
+h1{margin:6px 0 6px 0;font:700 26px/1.15 var(--disp);letter-spacing:-.01em}
+.sub{color:var(--mut);font-size:14px}
+.card{width:100%;max-width:720px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 4px 24px rgba(0,0,0,.06)}
+.row{display:flex;gap:8px;align-items:stretch}
+.input{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px}
+.input:focus-within{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.06)}
+input[type=url],input[type=text]{border:0;outline:0;width:100%;background:transparent}
+.hint{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;color:var(--mut);font-size:12px}
+.kbd{font:12px var(--mono);background:var(--soft);border:1px solid var(--line);padding:2px 6px;border-radius:7px}
+.result{margin-top:10px;display:flex;gap:8px;align-items:center;border:1px dashed var(--line);border-radius:10px;padding:10px 12px;background:var(--soft)}
+.url{font:14px/1.2 var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.pill{font-size:11px;padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--mut)}
+.features{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
+.feature{display:flex;align-items:center;gap:6px;color:#111;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px;font-size:12px}
+.foot{margin-top:auto;color:var(--mut);font-size:12px;padding:8px;text-align:center}
+hr{border:0;border-top:1px solid var(--line);margin:12px 0}
+@media(min-width:768px){h1{font-size:30px}.btn{padding:10px 14px}}
 </style>
 </head>
 <body>
-<header class=container>
-  <div class=header>
-    <a class=brand href=/ aria-label="4ev.link Home"><i data-lucide=link-2></i><span>4ev.link</span></a>
-    <nav class=nav>
-      <a class=btn ghost href=#login><i data-lucide=log-in></i><span>Log in</span></a>
-      <a class="btn primary" href=#signup><i data-lucide=user-plus></i><span>Sign up</span></a>
-    </nav>
-  </div>
-</header>
+<div class="wrap" x-data="app()" x-cloak>
+  <nav class="nav">
+    <div class="logo"><i data-lucide="link-2"></i><span>4ev.link</span><span class="badge">free</span></div>
+    <a href="/login" class="btn ghost"><i data-lucide="log-in"></i><span>Login</span></a>
+  </nav>

-<main class=container x-data="app()">
-  <section class=hero>
-    <h1>Get ur 4ev.link <span aria-hidden=true style="color:var(--heart)">❤️</span></h1>
-    <div class=sub>Free works. No account needed. Cloudflare-inspired, fast, and private.</div>
+  <section class="hero">
+    <h1>Get ur 4ev.link <i data-lucide="heart" style="color:#ef4444"></i></h1>
+    <div class="sub">Free works — no account needed. Custom URLs coming soon.</div>
  </section>

-  <section class="panel" @keyup.enter="go()">
-    <div class=form>
-      <input class=input type=url inputmode=url autocomplete=url placeholder="Paste a long URL, e.g. https://example.com/very/long/path?with=stuff" x-model.trim=url aria-label="Long URL">
-      <button class="btn primary" :disabled="!url||busy" @click=go()>
-        <i :data-lucide="busy?'loader-2':'wand-2'"></i><span x-text="busy?'Shortening…':'Shorten'"></span>
-      </button>
-    </div>
-
-    <div class="row" style="margin-top:10px">
-      <span class=badge title="Random 4-char slug like the worker generates"><i data-lucide=hash></i><span>Free: random slug</span></span>
-      <span class=badge title="Custom slugs coming soon"><i data-lucide=lock></i><span>Pro: custom URLs (soon)</span></span>
-      <span class=meta x-text="'e.g. '+location.origin+'/'+ex"></span>
-    </div>
-
-    <template x-if=err><p class="meta" style="color:#b91c1c;margin:12px 0 0" x-text=err role=alert></p></template>
-
-    <template x-if=res>
-      <div class="card" style="margin-top:12px" aria-live=polite>
-        <div class="row" style="justify-content:space-between">
-          <div>
-            <div class=meta>Short URL</div>
-            <div class="mono" style="word-break:break-all"><a :href=res target=_blank rel=noopener x-text=res></a></div>
-          </div>
-          <div class=copy>
-            <button class=btn @click=copy()><i data-lucide=copy></i><span>Copy</span></button>
-            <a class="btn" :href=res target=_blank rel=noopener><i data-lucide=external-link></i><span>Open</span></a>
-          </div>
-        </div>
-        <div class="hr"></div>
-        <div class="row">
-          <span class=small>Destination</span>
-          <span class="mono" style="word-break:break-all" x-text=pretty(url)></span>
-        </div>
+  <section class="card" style="margin-top:8px">
+    <form @submit.prevent="go">
+      <div class="row">
+        <label class="input" style="flex:1">
+          <i data-lucide="link"></i>
+          <input type="url" inputmode="url" autocomplete="url" spellcheck="false" placeholder="https://example.com/anything" x-model.trim="t" @keyup.enter="go" required>
+        </label>
+        <button class="btn" :disabled="loading" @click.prevent="go">
+          <i :data-lucide="loading?'loader-2':'sparkles'"></i><span x-text="loading?'Shortening…':'Shorten'"></span>
+        </button>
      </div>
-    </template>
+
+      <div class="hint">
+        <div>Free plan → random 4-char slug, e.g. <span class="kbd" x-text="sample"></span></div>
+        <div class="pill">Pro: custom alias <span style="opacity:.6">(soon)</span></div>
+      </div>
+
+      <div class="row" style="margin-top:8px;opacity:.6;pointer-events:none">
+        <label class="input" title="Custom aliases for paid plan (coming soon)">
+          <i data-lucide="at-sign"></i>
+          <input type="text" placeholder="custom-alias (paid — coming soon)" disabled>
+        </label>
+      </div>
+
+      <template x-if="err">
+        <div class="result" style="border-color:#fecaca;background:#fff1f2;color:#991b1b">
+          <i data-lucide="alert-triangle"></i>
+          <div class="url" x-text="err"></div>
+        </div>
+      </template>
+
+      <template x-if="out">
+        <div class="result">
+          <i data-lucide="check-circle-2" style="color:#16a34a"></i>
+          <a class="url" :href="out" target="_blank" rel="noopener" x-text="out"></a>
+          <button class="btn" type="button" @click="copy" style="padding:8px 10px"><i data-lucide="copy"></i><span>Copy</span></button>
+        </div>
+      </template>
+
+      <div class="features">
+        <span class="feature"><i data-lucide="zap"></i>Fast</span>
+        <span class="feature"><i data-lucide="shield-check"></i>Privacy-first</span>
+        <span class="feature"><i data-lucide="globe"></i>Works anywhere</span>
+      </div>
+    </form>
  </section>

-  <section class="grid cols-3" style="margin-top:14px">
-    <div class=card><div class=row><i data-lucide=user-check></i><h2>No account needed</h2></div><div class=meta>Just paste and go. Works instantly from your phone.</div></div>
-    <div class=card><div class=row><i data-lucide=zap></i><h2>Edge-fast</h2></div><div class=meta>Backed by Cloudflare KV + Workers for global speed.</div></div>
-    <div class=card><div class=row><i data-lucide=shield-check></i><h2>Private</h2></div><div class=meta>We only store the URL mapping. No tracking pixels.</div></div>
-  </section>
-
-  <section class="grid cols-2" style="margin-top:14px">
-    <div class=card>
-      <div class=row><i data-lucide=gift></i><h2>Free</h2></div>
-      <ul class=meta>
-        <li>Random 4-char slugs</li>
-        <li>No login required</li>
-        <li>Copy and share in 1 click</li>
-      </ul>
-      <div class="hr"></div>
-      <button class="btn primary" @click="$el.blur();document.querySelector('input[type=url]').focus()"><i data-lucide=sparkles></i><span>Start free</span></button>
-    </div>
-    <div class=card>
-      <div class=row><i data-lucide=badge-dollar-sign></i><h2>Pro (coming soon)</h2></div>
-      <ul class=meta>
-        <li>Custom slugs (your brand)</li>
-        <li>Link management</li>
-        <li>Analytics</li>
-      </ul>
-      <div class="hr"></div>
-      <button class="btn" disabled><i data-lucide=clock></i><span>Notify me</span></button>
-    </div>
-  </section>
-
-  <section class="panel" style="margin-top:14px">
-    <div class=row>
-      <span class=meta>Tip: press <span class=kbd>Enter</span> to shorten faster. Works cross-origin via CORS.</span>
-    </div>
-  </section>
-</main>
-
-<footer class="container footer">
-  <div>UI inspired by Cloudflare. Colors: black/white/gray. Light theme. Mobile first.</div>
-  <div class=note style="margin-top:6px"><a href="https://github.com/4ev-link/4ev.link" target=_blank rel=noopener><i data-lucide=github></i> GitHub</a> • <a href=#terms>Terms</a> • <a href=#privacy>Privacy</a></div>
-</footer>
+  <footer class="foot">© <span x-text="new Date().getFullYear()"></span> 4ev.link · Built on the edge · Black/white/gray, light themed</footer>
+</div>

 <script src="//unpkg.com/alpinejs" defer></script>
-<script src="https://unpkg.com/lucide@latest" defer></script>
-<script>
-const C='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',L=4,r=()=>[...Array(L)].map(()=>C[Math.random()*C.length|0]).join('')
-function app(){return{
-  url:'',res:'',err:'',busy:0,ex:r(),
-  pretty:u=>{try{return new URL(u).href}catch{return u}},
-  copy(){navigator.clipboard?.writeText(this.res)},
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js" defer></script>
+<script defer>
+const app=()=>({t:'',out:'',err:'',loading:!1,sample:'',C:'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',L:4,
+  rnd(){return [...Array(this.L)].map(()=>this.C[Math.random()*this.C.length|0]).join('')},
+  init(){this.sample=location.origin+'/'+this.rnd();setTimeout(()=>lucide.createIcons(),0)},
  async go(){
-    this.err='';if(!this.url)return this.err='Please paste a URL.'
-    try{new URL(this.url)}catch(e){return this.err='That does not look like a valid URL.'}
-    this.busy=1;try{
-      const x=await fetch('/',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:this.url})})
-      if(!x.ok)throw new Error(await x.text())
-      const j=await x.json();this.res=j.shortUrl||location.origin+'/'+(j.slug||'');this.ex=r()
-    }catch(e){this.err=(e&&e.message)||'Something went wrong.'}finally{this.busy=0}
-  }
-}}
-addEventListener('load',()=>{try{lucide.createIcons()}catch{}})
+    if(this.loading)return;this.err='';this.out='';this.loading=!0;
+    try{
+      const r=await fetch('/',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:this.t})});
+      if(!r.ok)throw new Error((await r.text())||'Error');
+      const d=await r.json();this.out=d.shortUrl;this.t=''
+    }catch(e){this.err=e.message||'Invalid URL'}
+    finally{this.loading=!1;lucide.createIcons()}
+  },
+  async copy(){try{await navigator.clipboard.writeText(this.out)}catch{}}
+});
 </script>
 </body>
 </html>