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

Feat: Add minimalist CF-inspired landing page

Browse Source
This commit is contained in:
multipleof4
2025-09-26 19:42:35 -07:00
parent 8ebebb9d8a
commit 7c1f4b44ce
1 changed files with 83 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
public/index.html Normal file
View File

@@ -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>