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

Refactor: Redesign homepage layout and content

Browse Source
This commit is contained in:
multipleof4
2025-09-26 17:38:52 -07:00
parent 19f2c659d2
commit 3a328501bb
1 changed files with 5 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@@ -29,7 +29,7 @@
.kbd{font:12px/1 ui-monospace,Menlo,Consolas,monospace;border:1px solid var(--line);padding:6px 8px;border-radius:10px;background:var(--soft);color:var(--muted)}
.note{font-size:12px;color:var(--muted)}
.grid{display:grid;gap:12px;margin:26px auto;grid-template-columns:1fr;max-width:760px}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
.card{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:16px;box-shadow:var(--shadow);display:grid;gap:8px}
.card h3{margin:0;font-size:15px}
.card p{margin:0;color:var(--muted);font-size:13px}
@@ -68,17 +68,10 @@ a{color:inherit}
</header>
<section class="hero">
<h1 class="h1">Short links, built to last</h1>
<p class="sub">Clean, fast, privacy-first URL shortener. Free plan with randomized slugs only (e.g., 4ev.link/xY7z). No custom slugs, no ads.</p>
<h1 class="h1">Get your 4ev.link <span style="color:crimson">❤</span></h1>
<div class="form" @submit.prevent>
<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">
<template x-if="!busy"><i data-lucide="scissors" style="width:18px;height:18px"></i></template>
<template x-if="busy"><i data-lucide="loader-2" style="width:18px;height:18px;animation:spin .9s linear infinite"></i></template>
<span x-text="busy?'Working…':'Shorten'"></span>
</button>
</div>
<button class="btn" @click="shorten()" :disabled="busy" x-text="busy?'Working…':'Link'"></button>
<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>
@@ -106,10 +99,6 @@ a{color:inherit}
<div class="row"><i data-lucide="shield" style="width:18px;height:18px"></i><h3>Privacy-first</h3></div>
<p>No ad pages. No tracking pixels. Just clean redirects.</p>
</article>
<article class="card">
<div class="row"><i data-lucide="wand-2" style="width:18px;height:18px"></i><h3>Randomized slugs</h3></div>
<p>Free plan generates secure, random slugs. Custom branded links coming soon.</p>
</article>
</section>
<hr class="hr"/>
@@ -149,12 +138,11 @@ a{color:inherit}
</div>
</section>
<footer class="footer">
<footer class="footer" style="justify-content:center">
<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>
</div>
<div class="note">Free plan • Randomized links • Black/White/Gray UI</div>
</footer>
<div class="toast" x-cloak x-show="msg" x-text="msg" role="status" aria-live="polite"></div>
</div>