From db46122e5b718571ac7acc997e172eb2d1dd9759 Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Fri, 26 Sep 2025 19:52:00 -0700
Subject: [PATCH] Refactor: Use more gray and less black for UI elements

---
 index.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 16fc3ee..3244998 100644
--- a/index.html
+++ b/index.html
@@ -27,8 +27,8 @@
                 <form @submit.prevent="shorten()">
                     <div class="flex flex-col sm:flex-row gap-3">
                         <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">
-                        <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">
+                        <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-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>
                             <span x-text="loading ? 'Working...' : 'Shorten Link'">Shorten Link</span>
                         </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="result" x-cloak class="mt-4 p-3 bg-gray-100 rounded-lg">
                     <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">
                             <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>
@@ -50,12 +50,12 @@
             <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="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>
                 </div>
-                <div class="bg-white border-2 border-gray-900 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>
-                    <h3 class="text-xl font-bold text-gray-900">Paid Plan</h3>
+                <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-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-800">Paid Plan</h3>
                     <p class="mt-2 text-gray-600">Brand your links with custom slugs. More control for professionals and businesses.</p>
                 </div>
             </div>