mirror of
https://github.com/multipleof4/4ev.link.git
synced 2026-01-13 15:57:53 +00:00
71 lines
4.8 KiB
HTML
71 lines
4.8 KiB
HTML
<!doctype html><html lang="en"><head>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>4ev.link — tiny links that last</title><meta name="description" content="Free: random short link • Paid: custom URLs (coming soon).">
|
|
<link rel="icon" href="data:,"><style>[x-cloak]{display:none!important}</style>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>tailwind.config={theme:{extend:{fontFamily:{sans:['Inter','ui-sans-serif','system-ui','-apple-system','Segoe UI','Roboto','Arial']}}}}</script>
|
|
<script src="//unpkg.com/alpinejs" defer></script>
|
|
<script src="https://unpkg.com/lucide@latest" defer></script>
|
|
</head><body class="bg-white text-gray-900 antialiased">
|
|
<header class="sticky top-0 z-10 bg-white/80 backdrop-blur border-b border-gray-200">
|
|
<nav class="max-w-3xl mx-auto px-4 h-14 flex items-center justify-between">
|
|
<a href="/" class="font-semibold tracking-tight text-xl">4ev.link</a>
|
|
<div class="flex items-center gap-4">
|
|
<a href="/login" class="text-sm text-gray-700 hover:text-black">Log in</a>
|
|
<a href="/signup" class="text-sm bg-black text-white px-3 py-1.5 rounded-md hover:bg-gray-900">Sign up</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="max-w-3xl mx-auto px-4 pt-16 pb-24" x-data="{t:'',o:'',e:'',l:!1,async s(){this.e='',this.o='';let u=this.t.trim();try{new URL(u)}catch(_){this.e='Enter a valid URL';return}this.l=!0;try{let r=await fetch('/',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:u})});if(!r.ok)throw 0;let j=await r.json();this.o=j.shortUrl;this.$nextTick(()=>lucide?.createIcons())}catch(_){this.e='Something went wrong. Try again.'}finally{this.l=!1}},async c(){try{await navigator.clipboard.writeText(this.o);let b=this.$refs.copy;b?.classList.add('text-green-600');setTimeout(()=>b?.classList.remove('text-green-600'),900)}catch(_){}}">
|
|
<section class="text-center">
|
|
<h1 class="text-3xl sm:text-4xl font-semibold tracking-tight">Get ur 4ev.link <span class="text-red-500">❤</span></h1>
|
|
<p class="mt-3 text-gray-600 text-sm">
|
|
Free: random short link • Paid: custom URLs
|
|
<span class="ml-1 inline-flex items-center gap-1 rounded border border-gray-200 px-1.5 py-0.5 text-[11px] text-gray-700">coming soon</span>
|
|
</p>
|
|
</section>
|
|
|
|
<section class="mt-8">
|
|
<form @submit.prevent="s()" class="flex items-stretch gap-2">
|
|
<input x-model="t" type="url" inputmode="url" placeholder="https://example.com/very/long/link"
|
|
class="w-full rounded-md border border-gray-300 bg-white px-3 py-3 text-[15px] placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-900/10 focus:border-gray-400" required>
|
|
<button type="submit" :disabled="l"
|
|
class="shrink-0 inline-flex items-center gap-2 rounded-md bg-black text-white px-4 py-3 text-sm font-medium hover:bg-gray-900 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<i data-lucide="link" class="w-4 h-4"></i><span x-text="l?'Shortening…':'Shorten'"></span>
|
|
</button>
|
|
</form>
|
|
<p x-show="e" x-text="e" class="mt-2 text-sm text-red-600" role="alert"></p>
|
|
</section>
|
|
|
|
<section x-show="o" x-cloak class="mt-6">
|
|
<div class="rounded-md border border-gray-200 bg-white p-4 flex items-center justify-between">
|
|
<a :href="o" target="_blank" rel="noopener" class="font-medium text-gray-900 hover:underline truncate max-w-[75%]">
|
|
<i data-lucide="sparkles" class="inline w-4 h-4 mr-1 text-gray-500"></i><span x-text="o"></span>
|
|
</a>
|
|
<div class="flex items-center gap-2">
|
|
<a :href="o" target="_blank" rel="noopener" class="inline-flex items-center gap-1 text-sm text-gray-700 hover:text-black px-2 py-1 rounded-md border border-gray-200">
|
|
<i data-lucide="external-link" class="w-4 h-4"></i><span>Open</span>
|
|
</a>
|
|
<button @click="c()" class="inline-flex items-center gap-1 text-sm text-gray-700 hover:text-black px-2 py-1 rounded-md border border-gray-200">
|
|
<i data-lucide="copy" class="w-4 h-4" x-ref="copy"></i><span>Copy</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p class="mt-2 text-xs text-gray-500">Free plan generates random slugs. Custom URLs for paid — coming soon.</p>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="border-t border-gray-200">
|
|
<div class="max-w-3xl mx-auto px-4 py-8 text-sm text-gray-600 flex items-center justify-between">
|
|
<span>© <span x-text="new Date().getFullYear()"></span> 4ev.link</span>
|
|
<div class="flex gap-4">
|
|
<a href="https://github.com/4ev-link/4ev.link" class="hover:text-black inline-flex items-center gap-1"><i data-lucide="github" class="w-4 h-4"></i>GitHub</a>
|
|
<a href="/pricing" class="hover:text-black">Pricing</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>document.addEventListener('alpine:init',()=>{lucide?.createIcons()})</script>
|
|
</body></html>
|