Upload 20 files

static/app.js

@@ -17,7 +17,9 @@ function hugpanel() {
     currentZone: localStorage.getItem('hugpanel_zone') || null,
     activeTab: localStorage.getItem('hugpanel_tab') || 'files',
     maxZones: 0,
-    isDesktop: window.innerWidth >= 1280,
+    motd: '',
+    registrationDisabled: false,
+    isDesktop: window.innerWidth >= 1024,
     tabs: [
       { id: 'files', label: 'Files', icon: 'folder' },
       { id: 'editor', label: 'Editor', icon: 'file-code' },
@@ -81,6 +83,9 @@ function hugpanel() {
       await this.loadBackupStatus();
       this.adminApiUrl = this.backupStatus.admin_url || '';
 
+      // Load config (MOTD, registration state, zone limit) early
+      await this._loadZoneLimit();
+
       // Try to restore session from stored token
       if (this.token && this.adminApiUrl) {
         try {
@@ -140,7 +145,7 @@ function hugpanel() {
       });
 
       // Track desktop breakpoint
-      const mql = window.matchMedia('(min-width: 1280px)');
+      const mql = window.matchMedia('(min-width: 1024px)');
       mql.addEventListener('change', (e) => { this.isDesktop = e.matches; });
 
       // Persist session state
@@ -206,6 +211,8 @@ function hugpanel() {
         if (resp.ok) {
           const data = await resp.json();
           this.maxZones = data.max_zones || 0;
+          this.motd = data.motd || '';
+          this.registrationDisabled = !!data.disable_registration;
         }
       } catch {}
     },

static/index.html

@@ -56,9 +56,12 @@
         <!-- Tab switch -->
         <div class="flex bg-gray-800 rounded-lg p-0.5">
           <button @click="authMode = 'login'" :class="authMode === 'login' ? 'bg-brand-600 text-white shadow' : 'text-gray-400 hover:text-gray-200'" class="flex-1 py-2 text-sm font-medium rounded-md transition">Đăng nhập</button>
-          <button @click="authMode = 'register'" :class="authMode === 'register' ? 'bg-brand-600 text-white shadow' : 'text-gray-400 hover:text-gray-200'" class="flex-1 py-2 text-sm font-medium rounded-md transition">Đăng ký</button>
+          <button x-show="!registrationDisabled" @click="authMode = 'register'" :class="authMode === 'register' ? 'bg-brand-600 text-white shadow' : 'text-gray-400 hover:text-gray-200'" class="flex-1 py-2 text-sm font-medium rounded-md transition">Đăng ký</button>
         </div>
 
+        <!-- Registration disabled notice -->
+        <div x-show="registrationDisabled && authMode === 'register'" x-init="if(registrationDisabled) authMode='login'" class="text-xs text-yellow-400 bg-yellow-400/10 rounded-lg px-3 py-2">Đăng ký đã bị tắt bởi admin</div>
+
         <!-- Error -->
         <div x-show="authError" class="text-xs text-red-400 bg-red-400/10 rounded-lg px-3 py-2" x-text="authError"></div>
 
@@ -99,6 +102,12 @@
   <!-- ═══ MAIN PANEL (shown when logged in) ═══ -->
   <div x-show="user" x-cloak>
 
+  <!-- MOTD Banner -->
+  <div x-show="motd" class="fixed top-0 inset-x-0 z-[60] bg-brand-600/95 backdrop-blur text-white text-sm px-4 py-2.5 flex items-center justify-between lg:relative lg:z-auto">
+    <span x-text="motd" class="flex-1 text-center"></span>
+    <button @click="motd=''" class="ml-3 p-1 hover:bg-white/20 rounded transition text-xs">✕</button>
+  </div>
+
   <!-- ═══ Mobile Top Bar ═══ -->
   <header class="lg:hidden fixed top-0 inset-x-0 z-50 bg-gray-900/95 backdrop-blur border-b border-gray-800 px-4 py-3 flex items-center justify-between">
     <button @click="sidebarOpen = !sidebarOpen" class="p-1.5 rounded-lg hover:bg-gray-800 transition">
@@ -117,7 +126,7 @@
        @click="sidebarOpen = false"
        class="lg:hidden fixed inset-0 z-40 bg-black/60 backdrop-blur-sm"></div>
 
-  <div class="flex h-full">
+  <div class="flex h-screen overflow-hidden">
 
     <!-- ═══ Sidebar ═══ -->
     <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
@@ -186,20 +195,20 @@
     </aside>
 
     <!-- ═══ Main Content ═══ -->
-    <main class="flex-1 flex flex-col min-w-0 pt-14 lg:pt-0">
+    <main class="flex-1 flex flex-col min-w-0 min-h-0 pt-14 lg:pt-0 h-full">
 
       <!-- No zone selected -->
-      <div x-show="!currentZone" class="flex-1 overflow-y-auto p-4 xl:p-8" x-effect="if(!currentZone && backupStatus.configured) loadBackupList()">
-        <div class="text-center max-w-sm mx-auto mb-6 pt-4 xl:pt-8">
-          <div class="w-16 h-16 xl:w-20 xl:h-20 mx-auto mb-4 rounded-2xl bg-gray-800 flex items-center justify-center">
-            <i data-lucide="layout-dashboard" class="w-8 h-8 xl:w-10 xl:h-10 text-gray-600"></i>
+      <div x-show="!currentZone" class="flex-1 overflow-y-auto p-4 lg:p-8" x-effect="if(!currentZone && backupStatus.configured) loadBackupList()">
+        <div class="text-center max-w-sm mx-auto mb-6 pt-4 lg:pt-8">
+          <div class="w-16 h-16 lg:w-20 lg:h-20 mx-auto mb-4 rounded-2xl bg-gray-800 flex items-center justify-center">
+            <i data-lucide="layout-dashboard" class="w-8 h-8 lg:w-10 lg:h-10 text-gray-600"></i>
           </div>
-          <h2 class="text-lg xl:text-xl font-semibold text-gray-400 mb-2">Chọn hoặc tạo Zone</h2>
+          <h2 class="text-lg lg:text-xl font-semibold text-gray-400 mb-2">Chọn hoặc tạo Zone</h2>
           <p class="text-sm text-gray-600">Chọn zone từ sidebar hoặc tạo zone mới để bắt đầu.</p>
         </div>
 
         <!-- Cloud Backups (available even without selecting a zone) -->
-        <div x-show="backupStatus.configured" class="max-w-lg xl:max-w-2xl mx-auto space-y-4">
+        <div x-show="backupStatus.configured" class="max-w-3xl mx-auto space-y-4">
           <!-- Restore All button -->
           <button @click="restoreAll()" :disabled="backupStatus.running"
                   :class="backupStatus.running ? 'opacity-50 cursor-not-allowed' : 'hover:bg-emerald-500'"
@@ -276,22 +285,22 @@
             </template>
 
             <!-- Zone Actions (right side) -->
-            <div class="ml-auto flex items-center gap-1 xl:gap-2">
-              <div class="hidden xl:flex items-center gap-2 mr-3">
+            <div class="ml-auto flex items-center gap-1 lg:gap-2">
+              <div class="hidden lg:flex items-center gap-2 mr-3">
                 <div class="w-2 h-2 rounded-full bg-green-500"></div>
                 <span x-text="currentZone" class="text-sm text-gray-300 font-medium"></span>
               </div>
-              <span x-text="currentZone" class="text-xs text-gray-500 font-mono mr-2 hidden sm:inline xl:hidden"></span>
+              <span x-text="currentZone" class="text-xs text-gray-500 font-mono mr-2 hidden sm:inline lg:hidden"></span>
               <button @click="confirmDeleteZone()" class="p-1.5 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-400/10 transition flex items-center gap-1.5" title="Xoá zone">
                 <i data-lucide="trash-2" class="w-4 h-4"></i>
-                <span class="hidden xl:inline text-xs">Xoá zone</span>
+                <span class="hidden lg:inline text-xs">Xoá zone</span>
               </button>
             </div>
           </div>
         </div>
 
         <!-- ═══ TAB: Files + Editor (split on desktop) ═══ -->
-        <div x-show="activeTab === 'files' || activeTab === 'editor'" class="desktop-split flex-1 flex flex-col xl:flex-row min-h-0">
+        <div x-show="activeTab === 'files' || activeTab === 'editor'" class="desktop-split flex-1 flex flex-col lg:flex-row min-h-0">
 
         <!-- Files Panel (always visible on desktop when in files/editor tab) -->
         <div x-show="activeTab === 'files' || (isDesktop && activeTab === 'editor')" class="split-panel split-files flex flex-col min-h-0" :class="isDesktop ? '' : 'flex-1'">
@@ -413,10 +422,10 @@
                 </button>
               </div>
             </div>
-            <div class="flex-1 min-h-0">
+            <div class="flex-1 min-h-0 overflow-hidden">
               <textarea x-model="editorContent" @input="editorDirty = true"
                         @keydown.ctrl.s.prevent="saveFile()"
-                        class="w-full h-full p-4 bg-gray-950 text-gray-200 text-sm font-mono resize-none outline-none leading-relaxed"
+                        class="w-full h-full p-4 bg-gray-950 text-gray-200 text-sm font-mono resize-none outline-none leading-relaxed block"
                         spellcheck="false"></textarea>
             </div>
           </div>
@@ -431,7 +440,7 @@
 
         <!-- ═══ TAB: Ports ═══ -->
         <div x-show="activeTab === 'ports'" class="flex-1 overflow-y-auto">
-          <div class="p-4 xl:p-6 space-y-4 desktop-content mx-auto w-full">
+          <div class="p-4 lg:p-6 space-y-4 w-full">
             <!-- Add Port -->
             <div class="bg-gray-900 rounded-xl border border-gray-800 p-4">
               <h3 class="text-sm font-medium text-gray-300 mb-3">Thêm Port</h3>
@@ -447,7 +456,7 @@
             </div>
 
             <!-- Port List -->
-            <div class="space-y-2 xl:grid xl:grid-cols-2 xl:gap-3 xl:space-y-0">
+            <div class="space-y-2 lg:grid lg:grid-cols-2 2xl:grid-cols-3 lg:gap-3 lg:space-y-0">
               <template x-for="port in ports" :key="port.port">
                 <div class="bg-gray-900 rounded-xl border border-gray-800 p-4 flex items-center gap-3">
                   <div class="w-10 h-10 rounded-lg bg-green-500/10 flex items-center justify-center flex-shrink-0">
@@ -471,7 +480,7 @@
                 </div>
               </template>
 
-              <div x-show="ports.length === 0" class="text-center py-8 text-gray-600 text-sm xl:col-span-2">
+              <div x-show="ports.length === 0" class="text-center py-8 text-gray-600 text-sm lg:col-span-2 2xl:col-span-3">
                 Chưa có port nào
               </div>
             </div>
@@ -480,7 +489,7 @@
 
         <!-- ═══ TAB: Backup ═══ -->
         <div x-show="activeTab === 'backup'" x-effect="if(activeTab==='backup' && backupStatus.configured) loadBackupList()" class="flex-1 overflow-y-auto">
-          <div class="p-4 xl:p-6 space-y-4 desktop-content mx-auto w-full">
+          <div class="p-4 lg:p-6 space-y-4 w-full">
 
             <!-- Not configured -->
             <div x-show="!backupStatus.configured" class="bg-gray-900 rounded-xl border border-gray-800 p-6 text-center">
@@ -528,7 +537,7 @@
               </div>
 
               <!-- Action Buttons -->
-              <div class="grid grid-cols-2 xl:grid-cols-4 gap-2">
+              <div class="grid grid-cols-2 lg:grid-cols-4 gap-2">
                 <button @click="backupZone(currentZone)" :disabled="backupStatus.running"
                         :class="backupStatus.running ? 'opacity-50 cursor-not-allowed' : 'hover:bg-brand-500'"
                         class="flex items-center justify-center gap-2 px-4 py-3 bg-brand-600 rounded-xl text-sm font-medium transition">

static/style.css

@@ -25,6 +25,13 @@
   display: none;
 }
 
+/* ═══ Full-height layout ═══ */
+html, body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
 /* Terminal container */
 #terminal-container {
   min-height: 200px;
@@ -51,6 +58,18 @@ textarea {
   -moz-tab-size: 4;
 }
 
+/* Editor area fills all available space */
+.split-editor {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+.split-editor textarea {
+  flex: 1;
+  min-height: 0;
+}
+
 /* Smooth transitions */
 * {
   -webkit-tap-highlight-color: transparent;
@@ -68,6 +87,20 @@ textarea {
   }
 }
 
+/* ═══ Mobile: full-height panels ═══ */
+@media (max-width: 1279px) {
+  /* Editor tab: fill remaining viewport height */
+  .split-editor {
+    height: calc(100vh - 7rem);
+    min-height: 300px;
+  }
+  /* Files tab: fill remaining height */
+  .split-files {
+    height: calc(100vh - 7rem);
+    min-height: 300px;
+  }
+}
+
 /* Focus ring */
 input:focus, textarea:focus, button:focus-visible {
   outline: none;
@@ -94,24 +127,41 @@ input:focus, textarea:focus, button:focus-visible {
 
 /* ═══ Desktop Enhancements ═══ */
 
-/* Desktop split: files + editor side by side on xl+ */
-@media (min-width: 1280px) {
+/* Desktop split: files + editor side by side on lg+ (1024px) */
+@media (min-width: 1024px) {
   .desktop-split {
     flex-direction: row !important;
+    flex: 1;
+    min-height: 0;
   }
   .desktop-split > .split-files {
-    width: 380px;
+    width: 340px;
+    min-width: 280px;
+    max-width: 400px;
     flex-shrink: 0;
     border-right: 1px solid #1f2937;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
   }
   .desktop-split > .split-editor {
     flex: 1;
     min-width: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
   }
 }
 
-/* Desktop: better file list items */
+/* xl+ wider file panel */
 @media (min-width: 1280px) {
+  .desktop-split > .split-files {
+    width: 380px;
+  }
+}
+
+/* Desktop: better file list items */
+@media (min-width: 1024px) {
   .file-item .file-actions {
     opacity: 0;
     transition: opacity 0.15s;
@@ -121,14 +171,8 @@ input:focus, textarea:focus, button:focus-visible {
   }
 }
 
-/* Desktop: wider content areas for backup/ports */
-@media (min-width: 1280px) {
-  .desktop-content {
-    max-width: 960px;
-  }
-}
-@media (min-width: 1536px) {
-  .desktop-content {
-    max-width: 1100px;
-  }
+/* Desktop: content areas fill width (no max-width constraint) */
+.desktop-content {
+  width: 100%;
+  max-width: 100%;
 }