From 7c1f4b44cedcb0d943e502c7248705bb4ab4ef24 Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Fri, 26 Sep 2025 19:42:35 -0700
Subject: [PATCH] Feat: Add minimalist CF-inspired landing page

---
 public/index.html | 83 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 public/index.html
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..2b8f6cb
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>4ev.link - URL Shortener</title>
+<script src="https://unpkg.com/alpinejs@3/dist/cdn.min.js" defer></script>
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font:16px/1.6 system-ui,-apple-system,sans-serif;color:#1a1a1a;background:linear-gradient(135deg,#f5f5f5,#fff)}
+.c{max-width:640px;margin:0 auto;padding:2rem}
+h1{font-size:3rem;font-weight:800;margin:4rem 0 1rem;background:linear-gradient(135deg,#000,#555);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+.s{color:#666;font-size:1.125rem;margin-bottom:3rem}
+.f{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 2px 8px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04)}
+.i{display:flex;gap:.75rem;margin-bottom:1.5rem}
+input{flex:1;padding:.875rem 1rem;border:2px solid #e5e5e5;border-radius:8px;font-size:1rem;transition:all .2s}
+input:focus{outline:none;border-color:#000;box-shadow:0 0 0 3px rgba(0,0,0,.05)}
+button{padding:.875rem 1.5rem;background:#000;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}
+button:hover{background:#333;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
+button:active{transform:translateY(0)}
+.r{background:#f9f9f9;border:2px solid #e5e5e5;border-radius:8px;padding:1rem;display:flex;align-items:center;justify-content:space-between;animation:slideIn .3s ease}
+.r a{color:#000;font-weight:600;text-decoration:none;word-break:break-all}
+.r a:hover{text-decoration:underline}
+.cp{padding:.5rem 1rem;background:#fff;border:2px solid #e5e5e5;border-radius:6px;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:.375rem;transition:all .2s}
+.cp:hover{border-color:#000;background:#fafafa}
+.e{color:#dc2626;font-size:.875rem;margin-top:.5rem;display:flex;align-items:center;gap:.375rem}
+.st{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:4rem;padding-top:3rem;border-top:1px solid #e5e5e5}
+.st>div{text-align:center}
+.st h3{font-size:2rem;font-weight:700;margin:.5rem 0}
+.st p{color:#666;font-size:.875rem}
+@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
+.ft{margin-top:4rem;padding-top:2rem;border-top:1px solid #e5e5e5;text-align:center;color:#999;font-size:.875rem}
+</style>
+</head>
+<body>
+<div class="c">
+<h1>4ev.link</h1>
+<p class="s">Shorten your URLs forever. Simple, fast, and reliable.</p>
+
+<div class="f" x-data="{url:'',result:null,error:null,loading:false,async shorten(){if(!this.url)return;this.loading=true;this.error=null;try{const r=await fetch('/',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({url:this.url})});if(!r.ok)throw new Error('Invalid URL');this.result=await r.json();this.url=''}catch(e){this.error=e.message}finally{this.loading=false}},copy(){navigator.clipboard.writeText(this.result.shortUrl);this.$refs.cb.textContent='Copied!';setTimeout(()=>this.$refs.cb.textContent='Copy',2000)}}">
+<form @submit.prevent="shorten" class="i">
+<input type="url" x-model="url" placeholder="Enter your long URL here..." required>
+<button type="submit" :disabled="loading">
+<i data-lucide="link" style="width:18px;height:18px"></i>
+<span x-text="loading?'Creating...':'Shorten'"></span>
+</button>
+</form>
+
+<div x-show="error" x-cloak class="e">
+<i data-lucide="alert-circle" style="width:16px;height:16px"></i>
+<span x-text="error"></span>
+</div>
+
+<div x-show="result" x-cloak class="r">
+<a :href="result?.shortUrl" target="_blank" x-text="result?.shortUrl"></a>
+<button @click="copy" class="cp" x-ref="cb">Copy</button>
+</div>
+</div>
+
+<div class="st">
+<div>
+<i data-lucide="zap" style="width:24px;height:24px;margin:0 auto;color:#666"></i>
+<h3>Fast</h3>
+<p>Lightning-quick redirects powered by Cloudflare's edge network</p>
+</div>
+<div>
+<i data-lucide="shield" style="width:24px;height:24px;margin:0 auto;color:#666"></i>
+<h3>Secure</h3>
+<p>HTTPS everywhere with built-in protection against malicious URLs</p>
+</div>
+<div>
+<i data-lucide="infinity" style="width:24px;height:24px;margin:0 auto;color:#666"></i>
+<h3>Forever</h3>
+<p>Your short links work forever, no expiration dates</p>
+</div>
+</div>
+
+<div class="ft">© 2024 4ev.link · Built with Cloudflare Workers</div>
+</div>
+<script>lucide.createIcons()</script>
+</body>
+</html>
