fixup front

Author: nil

assets/frp.template

@@ -31,33 +31,46 @@
     <div class="transition-all duration-300">
 
         <!-- Status Bar -->
-        <div class="flex items-center justify-between bg-white dark:bg-gray-800 px-6 py-4 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 mb-6">
-            <div class="flex flex-col">
-                <span class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400" x-text="(currentTab === 'frps' ? 'Server' : 'Client') + ' Status'"></span>
-                <span class="text-sm font-bold mt-1"
-                      :class="isEnabled ? 'text-green-600 dark:text-green-400' : 'text-gray-400'"
-                      x-text="isEnabled ? 'ENABLED (Boot on Start)' : 'DISABLED'">
-                </span>
-            </div>
+        <div class="flex flex-col sm:flex-row sm:items-center justify-between bg-white dark:bg-gray-800 px-6 py-4 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 mb-6 gap-4">
 
-            <div class="flex items-center gap-4">
-                <!-- Start Button -->
+            <!-- Left: Manual Actions (Start Service) -->
+            <div class="flex items-center w-full sm:w-auto">
                 <button @click="manageService('start')"
-                        class="px-4 py-2 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/50 rounded-lg text-xs font-bold transition-colors flex items-center">
-                    <i class="ri-play-circle-fill mr-1.5 text-lg"></i>
-                    Start Now
+                        class="w-full sm:w-auto px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-sm font-bold transition-all shadow-md hover:shadow-lg flex items-center justify-center group">
+                    <i class="ri-play-circle-line mr-2 text-lg group-hover:scale-110 transition-transform"></i>
+                    <span x-text="'Start ' + (currentTab === 'frps' ? 'Server' : 'Client')"></span>
                 </button>
+                <!-- Helper text for manual start -->
+                <span class="ml-4 text-xs text-gray-400 hidden sm:inline-block">
+                    Click to start service immediately within this session.
+                </span>
+            </div>
+
+            <!-- Right: Auto-Boot Configuration (Grouped) -->
+            <div class="flex items-center justify-between sm:justify-end w-full sm:w-auto gap-3 bg-gray-50 dark:bg-gray-700/30 px-4 py-2 rounded-xl border border-gray-100 dark:border-gray-600">
 
-                <!-- Enable/Disable Toggle -->
+                <!-- Label & Status Text -->
+                <div class="flex flex-col items-end mr-1">
+                    <span class="text-[10px] font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500">Boot on Start</span>
+                    <span class="text-xs font-extrabold transition-colors"
+                          :class="isEnabled ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'"
+                          x-text="isEnabled ? 'ENABLED' : 'DISABLED'">
+                    </span>
+                </div>
+
+                <!-- Toggle Switch -->
                 <button @click="manageService('enable')"
-                        class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
-                        :class="isEnabled ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-700'">
+                        class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+                        :class="isEnabled ? 'bg-green-500' : 'bg-gray-200 dark:bg-gray-600'">
+                    <span class="sr-only">Toggle setting</span>
                     <span class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                           :class="isEnabled ? 'translate-x-5' : 'translate-x-0'"></span>
                 </button>
             </div>
+
         </div>
 
+
         <!-- Info Card (Dynamic) -->
         <div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-5 border border-blue-100 dark:border-blue-800 mb-6">
             <div class="flex items-start">