mirror of
https://github.com/4ev-link/4ev.link.git
synced 2026-01-13 16:18:05 +00:00
76 lines
5.1 KiB
HTML
76 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>4ev.link - Custom Short URLs</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
</head>
|
|
<body class="bg-slate-900 text-slate-200 min-h-screen flex items-center justify-center font-sans overflow-hidden">
|
|
|
|
<div class="absolute top-0 left-0 w-72 h-72 bg-gradient-to-tr from-violet-600 to-rose-600 rounded-full filter blur-3xl opacity-30 animate-blob"></div>
|
|
<div class="absolute bottom-0 right-0 w-72 h-72 bg-gradient-to-br from-blue-600 to-green-600 rounded-full filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
|
|
|
|
<main x-data="{ view: 'landing' }" class="relative z-10 w-full max-w-md mx-auto p-4 text-center">
|
|
|
|
<!-- Landing View -->
|
|
<div x-show="view === 'landing'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90">
|
|
<h1 class="text-5xl font-bold mb-2 flex items-center justify-center gap-3">
|
|
<i data-lucide="link" class="w-10 h-10"></i> 4ev.link
|
|
</h1>
|
|
<p class="text-slate-400 mb-8 max-w-sm mx-auto">
|
|
If you want short custom urls, like url shortening to a custom slug, our platform is for you.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button @click="view = 'login'" class="w-full sm:w-auto px-6 py-3 font-semibold rounded-lg bg-slate-800 hover:bg-slate-700 transition-colors duration-200">
|
|
Login
|
|
</button>
|
|
<button @click="view = 'signup'" class="w-full sm:w-auto px-6 py-3 font-semibold rounded-lg text-white bg-gradient-to-r from-sky-500 to-indigo-500 hover:opacity-90 transition-opacity duration-200 flex items-center justify-center gap-2">
|
|
Sign Up Now <i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Auth Forms View -->
|
|
<div x-show="view !== 'landing'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" class="bg-slate-800/50 backdrop-blur-sm p-8 rounded-xl border border-slate-700" style="display: none;">
|
|
<button @click="view = 'landing'" class="absolute top-4 left-4 text-slate-400 hover:text-white transition-colors">
|
|
<i data-lucide="arrow-left"></i>
|
|
</button>
|
|
|
|
<!-- Login Form -->
|
|
<div x-show="view === 'login'">
|
|
<h2 class="text-3xl font-bold mb-6">Login</h2>
|
|
<form class="space-y-4">
|
|
<input type="text" placeholder="Username" required class="w-full p-3 bg-slate-700 border border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-sky-500">
|
|
<input type="password" placeholder="Password" required class="w-full p-3 bg-slate-700 border border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-sky-500">
|
|
<button type="submit" class="w-full py-3 font-semibold rounded-lg text-white bg-gradient-to-r from-sky-500 to-indigo-500 hover:opacity-90 transition-opacity">Login</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Signup Form -->
|
|
<div x-show="view === 'signup'">
|
|
<h2 class="text-3xl font-bold mb-6">Create Account</h2>
|
|
<form class="space-y-4">
|
|
<input type="text" placeholder="Username" required class="w-full p-3 bg-slate-700 border border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
|
<input type="password" placeholder="Password" required class="w-full p-3 bg-slate-700 border border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
|
<button type="submit" class="w-full py-3 font-semibold rounded-lg text-white bg-gradient-to-r from-sky-500 to-indigo-500 hover:opacity-90 transition-opacity">Sign Up</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
.animate-blob { animation: blob 7s infinite; }
|
|
.animation-delay-4000 { animation-delay: -4s; }
|
|
@keyframes blob {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(30px, -50px) scale(1.1); }
|
|
66% { transform: translate(-20px, 20px) scale(0.9); }
|
|
}
|
|
</style>
|
|
<script>lucide.createIcons();</script>
|
|
</body>
|
|
</html>
|