From 4bbe797d9b5bfeac201dc0edc867dfe4167523b1 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Tue, 25 Nov 2025 18:42:32 +0100
Subject: [PATCH] [FEAT] Enhance UI

---
 src/App.vue | 48 +++++++++++++++++++++++++-----------------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0f55fdc..b8e999f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="min-h-screen lg:h-screen flex flex-col p-4 sm:p-8 bg-slate-50 dark:bg-gray-950 transition-colors duration-300">
     <div class="flex flex-col flex-1 lg:overflow-hidden">
-      <header class="mb-4 sm:mb-6">
+      <header class="mb-4 sm:mb-3">
         <div class="flex flex-col sm:flex-row justify-between items-center gap-4 mb-6">
           <div class="text-center sm:text-left">
             <h1 class="text-3xl sm:text-5xl font-bold text-gray-900 dark:text-gray-100 tracking-tight mb-2">Spritesheet generator</h1>
@@ -49,6 +49,28 @@
         </div>
       </header>
 
+      <div class="flex-shrink-0 p-3 mb-3 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-700 border border-blue-200 dark:border-gray-600 rounded-2xl">
+        <div class="flex flex-col sm:flex-row items-center justify-between gap-2">
+          <div class="flex items-center gap-2 text-center sm:text-left">
+            <i class="text-lg text-blue-600 dark:text-blue-400 fas fa-ad"></i>
+            <span class="text-sm font-semibold text-gray-800 dark:text-gray-100">Your ad here</span>
+            <span class="hidden sm:inline text-xs text-gray-600 dark:text-gray-400">- Reach thousands of game developers and creative professionals</span>
+          </div>
+          <div class="flex gap-2">
+            <a href="mailto:root@adhd.sh" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded transition-all">
+              <i class="text-xs fas fa-envelope"></i>
+              <span class="hidden sm:inline">root@adhd.sh</span>
+              <span class="sm:hidden">Email</span>
+            </a>
+            <a href="https://discord.gg/JTev3nzeDa" target="_blank" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 rounded transition-all">
+              <i class="text-xs fab fa-discord"></i>
+              <span class="hidden sm:inline">nu11ed</span>
+              <span class="sm:hidden">Discord</span>
+            </a>
+          </div>
+        </div>
+      </div>
+
       <main class="flex flex-col flex-1 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-3xl shadow-xl border border-gray-200/50 dark:border-gray-700/50 lg:overflow-hidden transition-all duration-300">
         <!-- Welcome state -->
         <div v-if="!layers.some(l => l.sprites.length)" class="p-6 sm:p-10 overflow-y-auto">
@@ -271,6 +293,7 @@
               <div class="flex gap-1 p-2">
                 <button
                   @click="activeTab = 'canvas'"
+                  class="border-gray-600 border"
                   :class="[
                     'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer',
                     activeTab === 'canvas' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50',
@@ -281,6 +304,7 @@
                 </button>
                 <button
                   @click="activeTab = 'preview'"
+                  class="border-gray-600 border"
                   :class="[
                     'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all cursor-pointer',
                     activeTab === 'preview' ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50',
@@ -305,28 +329,6 @@
           </div>
         </div>
       </main>
-
-      <div class="flex-shrink-0 p-3 mt-3 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-gray-800 dark:to-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg">
-        <div class="flex flex-col sm:flex-row items-center justify-between gap-2">
-          <div class="flex items-center gap-2 text-center sm:text-left">
-            <i class="text-lg text-blue-600 dark:text-blue-400 fas fa-ad"></i>
-            <span class="text-sm font-semibold text-gray-800 dark:text-gray-100">Your ad here</span>
-            <span class="hidden sm:inline text-xs text-gray-600 dark:text-gray-400">- Reach thousands of game developers and creative professionals</span>
-          </div>
-          <div class="flex gap-2">
-            <a href="mailto:root@adhd.sh" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded transition-all">
-              <i class="text-xs fas fa-envelope"></i>
-              <span class="hidden sm:inline">root@adhd.sh</span>
-              <span class="sm:hidden">Email</span>
-            </a>
-            <a href="https://discord.gg/JTev3nzeDa" target="_blank" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 rounded transition-all">
-              <i class="text-xs fab fa-discord"></i>
-              <span class="hidden sm:inline">nu11ed</span>
-              <span class="sm:hidden">Discord</span>
-            </a>
-          </div>
-        </div>
-      </div>
     </div>
 
     <HelpModal :is-open="isHelpModalOpen" @close="closeHelpModal" />