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: Use more gray and less black for UI elements

Browse Source
This commit is contained in:
multipleof4
2025-09-26 19:52:00 -07:00
parent 2d57479def
commit db46122e5b
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@@ -27,8 +27,8 @@
<form @submit.prevent="shorten()"> <form @submit.prevent="shorten()">
<div class="flex flex-col sm:flex-row gap-3"> <div class="flex flex-col sm:flex-row gap-3">
<label for="url-input" class="sr-only">URL to shorten</label> <label for="url-input" class="sr-only">URL to shorten</label>
<input x-model="longUrl" type="url" id="url-input" placeholder="https://your-long-url.com/goes-here" required class="flex-grow w-full px-4 py-3 bg-gray-100 border border-gray-200 rounded-lg focus:ring-2 focus:ring-gray-800 focus:outline-none transition"> <input x-model="longUrl" type="url" id="url-input" placeholder="https://your-long-url.com/goes-here" required class="flex-grow w-full px-4 py-3 bg-gray-100 border border-gray-200 rounded-lg focus:ring-2 focus:ring-gray-600 focus:outline-none transition">
<button type="submit" :disabled="loading" class="inline-flex items-center justify-center px-6 py-3 font-semibold text-white bg-gray-900 rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-800 focus:ring-offset-2 disabled:bg-gray-400 transition"> <button type="submit" :disabled="loading" class="inline-flex items-center justify-center px-6 py-3 font-semibold text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-800 focus:ring-offset-2 disabled:bg-gray-400 transition">
<i x-show="loading" x-cloak class="animate-spin -ml-1 mr-3 h-5 w-5" data-lucide="loader-2"></i> <i x-show="loading" x-cloak class="animate-spin -ml-1 mr-3 h-5 w-5" data-lucide="loader-2"></i>
<span x-text="loading ? 'Working...' : 'Shorten Link'">Shorten Link</span> <span x-text="loading ? 'Working...' : 'Shorten Link'">Shorten Link</span>
</button> </button>
@@ -38,7 +38,7 @@
<div x-show="error" x-cloak class="mt-4 p-3 text-sm text-red-700 bg-red-100 rounded-lg" x-text="error"></div> <div x-show="error" x-cloak class="mt-4 p-3 text-sm text-red-700 bg-red-100 rounded-lg" x-text="error"></div>
<div x-show="result" x-cloak class="mt-4 p-3 bg-gray-100 rounded-lg"> <div x-show="result" x-cloak class="mt-4 p-3 bg-gray-100 rounded-lg">
<div class="flex items-center justify-between gap-4"> <div class="flex items-center justify-between gap-4">
<a :href="result?.shortUrl" x-text="result?.shortUrl" target="_blank" class="font-mono text-gray-800 hover:underline truncate"></a> <a :href="result?.shortUrl" x-text="result?.shortUrl" target="_blank" class="font-mono text-gray-700 hover:underline truncate"></a>
<button @click="copyToClipboard(result?.shortUrl)" class="flex-shrink-0 inline-flex items-center justify-center gap-2 px-3 py-1.5 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-md hover:bg-gray-50"> <button @click="copyToClipboard(result?.shortUrl)" class="flex-shrink-0 inline-flex items-center justify-center gap-2 px-3 py-1.5 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-md hover:bg-gray-50">
<i :class="{'text-green-500': copied}" :data-lucide="copied ? 'check' : 'copy'" class="w-4 h-4"></i> <i :class="{'text-green-500': copied}" :data-lucide="copied ? 'check' : 'copy'" class="w-4 h-4"></i>
<span x-text="copied ? 'Copied!' : 'Copy'">Copy</span> <span x-text="copied ? 'Copied!' : 'Copy'">Copy</span>
@@ -50,12 +50,12 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4">
<div class="bg-white border border-gray-200 rounded-xl p-6 text-center"> <div class="bg-white border border-gray-200 rounded-xl p-6 text-center">
<div class="inline-flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg mb-4"><i data-lucide="shuffle" class="w-6 h-6 text-gray-700"></i></div> <div class="inline-flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg mb-4"><i data-lucide="shuffle" class="w-6 h-6 text-gray-700"></i></div>
<h3 class="text-xl font-bold text-gray-900">Free Plan</h3> <h3 class="text-xl font-bold text-gray-800">Free Plan</h3>
<p class="mt-2 text-gray-600">Perfect for quick sharing. Get a random, memorable short URL instantly and for free.</p> <p class="mt-2 text-gray-600">Perfect for quick sharing. Get a random, memorable short URL instantly and for free.</p>
</div> </div>
<div class="bg-white border-2 border-gray-900 rounded-xl p-6 text-center shadow-lg"> <div class="bg-white border-2 border-gray-800 rounded-xl p-6 text-center shadow-lg">
<div class="inline-flex items-center justify-center w-12 h-12 bg-gray-900 rounded-lg mb-4"><i data-lucide="crown" class="w-6 h-6 text-white"></i></div> <div class="inline-flex items-center justify-center w-12 h-12 bg-gray-800 rounded-lg mb-4"><i data-lucide="crown" class="w-6 h-6 text-white"></i></div>
<h3 class="text-xl font-bold text-gray-900">Paid Plan</h3> <h3 class="text-xl font-bold text-gray-800">Paid Plan</h3>
<p class="mt-2 text-gray-600">Brand your links with custom slugs. More control for professionals and businesses.</p> <p class="mt-2 text-gray-600">Brand your links with custom slugs. More control for professionals and businesses.</p>
</div> </div>
</div> </div>