From 73c430e393faa87ee3198ad2bec7d57c0c9090de Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Sat, 8 Mar 2025 04:20:45 +0700
Subject: [PATCH] step 11 : perbaikan slicing dashboard, settings change mb di
 port status

---
 v1/dashboard.html | 439 ++++++++++++++++++++--------------------------
 v1/settings.html  |  32 ++--
 2 files changed, 207 insertions(+), 264 deletions(-)
diff --git a/v1/dashboard.html b/v1/dashboard.html
index c9f8d24..c5356e0 100644
--- a/v1/dashboard.html
+++ b/v1/dashboard.html
@@ -13,270 +13,213 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
 </head>
 
-<body class="bg-[#F2F9FF]">
-    <!-- wrapper -->
-    <div>
-        <!-- navbar phone, tablet and desktop up start -->
-        <div class="bg-white" x-data="{ open: false }">
-            <div class="flex justify-between py-5 px-4">
-                <a class="block text-teal-600" href="#">
-                    <span class="sr-only">Home</span>
-                    <div class="flex items-center space-x-2">
-                        <img src="../images/logoServer.png" class="mr-3">
-                        <p class="lg:text-lg xl:text-xl text-[#2196F3] font-normal">Port Server</p>
-                    </div>
-                </a>
-                <!-- menu mobile appear -->
-                <div>
-                    <!-- Overlay -->
-                    <div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false"></div>
-                
-                    <!-- Modal -->
-                    <div x-show="open" x-transition
-                        class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
-                        x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
-                        <ul class="space-y-2">
-                            <li>
-                                <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
-                                    <div class="flex items-center gap-2">
-                                        <span class="material-symbols-outlined text-black/87">settings</span>
-                                        Setting
-                                    </div>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
-                                    <div class="flex items-center gap-2">
-                                        <span class="material-symbols-outlined text-black/87">edit</span>
-                                        Assay Format
-                                    </div>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
-                                    <div class="flex items-center gap-2">
-                                        <span class="material-symbols-outlined text-black/87">calculate</span>
-                                        Result
-                                    </div>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
-                                    <div class="flex items-center gap-2">
-                                        <span class="material-symbols-outlined text-black/87">online_prediction</span>
-                                        Status
-                                    </div>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
-                                    <div class="flex items-center gap-2">
-                                        <span class="material-symbols-outlined text-black/87">person</span>
-                                        Akun
-                                    </div>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
+<body class="bg-[#F2F9FF] h-screen flex flex-col">
+    <!-- Navbar -->
+    <div class="bg-white h-20 flex items-center justify-between px-6">
+        <!-- Logo -->
+        <a class="block text-teal-600" href="#">
+            <div class="flex items-center space-x-2">
+                <img src="../images/logoServer.png" class="mr-3 h-10" />
+                <p class="lg:text-lg xl:text-xl text-[#2196F3] font-normal">Port Server</p>
+            </div>
+        </a>
+
+        <!-- Navigasi (Desktop) -->
+        <nav class="hidden lg:flex items-center text-sm gap-6 ml-auto">
+            <ul class="flex items-center gap-6 text-sm">
+                <li>
+                    <a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">SETTING</a>
+                </li>
+                <li>
+                    <a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">ASSAY FORMAT</a>
+                </li>
+                <li>
+                    <a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">ASSAY CALC</a>
+                </li>
+                <li>
+                    <a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">ONLINE</a>
+                </li>
+                <li>
+                    <img src="../images/avatar.png" class="mr-3" />
+                </li>
+            </ul>
+        </nav>
+
+        <!-- Hamburger Menu (Mobile) -->
+        <div x-data="{ open: false }">
+            <button @click="open = true" class="block lg:hidden text-[#2196F3] hover:text-gray-600/75">
+                <span class="material-symbols-outlined text-3xl">menu</span>
+            </button>
+
+            <!-- Bottom Sheet Menu (Mobile) -->
+            <div>
+                <!-- Overlay -->
+                <div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false">
                 </div>
-                
-                <!-- menu mobile appear -->
-                <!-- menu large appear -->
-                <nav aria-label="Global" class="hidden lg:block">
-                    <ul class="flex items-center gap-6 text-sm">
+
+                <!-- Modal -->
+                <div x-show="open" x-transition
+                    class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
+                    x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
+                    <ul class="space-y-2">
                         <li>
-                            <a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> SETTING </a>
-                        </li>
-                        <li>
-                            <a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> ASSAY FORMAT
+                            <a href="#"
+                                class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                <div class="flex items-center gap-2">
+                                    <span class="material-symbols-outlined text-[#2196F3]">settings</span>
+                                    Setting
+                                </div>
                             </a>
                         </li>
                         <li>
-                            <a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> RESULT
+                            <a href="#"
+                                class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                <div class="flex items-center gap-2">
+                                    <span class="material-symbols-outlined text-black/87">edit</span>
+                                    Assay Format
+                                </div>
                             </a>
                         </li>
                         <li>
-                            <a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> ONLINE </a>
+                            <a href="#"
+                                class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                <div class="flex items-center gap-2">
+                                    <span class="material-symbols-outlined text-black/87">calculate</span>
+                                    Result
+                                </div>
+                            </a>
                         </li>
                         <li>
-                            <img src="../images/avatar.png" class="mr-3">
+                            <a href="#"
+                                class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                <div class="flex items-center gap-2">
+                                    <span class="material-symbols-outlined text-black/87">online_prediction</span>
+                                    Status
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#"
+                                class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
+                                <div class="flex items-center gap-2">
+                                    <span class="material-symbols-outlined text-black/87">person</span>
+                                    Akun
+                                </div>
+                            </a>
                         </li>
                     </ul>
-                </nav>
-                <!-- menu large appear -->
-                <button @click="open = true"
-                    class="block rounded-sm bg-white text-[#2196F3] transition hover:text-gray-600/75 lg:hidden">
-                    <span class="sr-only">Toggle menu</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor" stroke-width="2">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-                    </svg>
-                </button>
-            </div>
-        </div>
-        <!-- navbar phone, tablet and desktop up end -->
-        <!-- content -->
-        <div class="bg-[#F2F9FF]">
-            <div class="flex flex-col lg:flex-row px-6 py-5">
-                <!-- Kiri -->
-                <div class="flex w-full lg:w-1/2 mr-0 lg:mr-5">
-                    <div class="flex flex-col w-full">
-                        <div class="bg-black/87 h-[385px] flex flex-col">
-                            <div class="bg-black/87 p-2 text-white font-medium text-lg">LOGS</div>
-                            <div class="overflow-y-auto flex-1 p-2 bg-black/87">
-                                <div class="space-y-4">
-                                    <div class="grid lg:grid-cols-[auto_1fr] gap-2 items-start">
-                                        <h2 class="font-normal text-sm text-white whitespace-nowrap">
-                                            2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
-                                        </h2>
-                                        <p class="font-normal text-sm text-white w-full text-justify">
-                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
-                                            doloremque, quisquam architecto possimus odio accusamus...
-                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
-                                        </p>
-                                    </div>
-                                    <!-- 2 -->
-                                    <div class="grid lg:grid-cols-[auto_1fr] gap-2 items-start">
-                                        <h2 class="font-normal text-sm text-white whitespace-nowrap">
-                                            2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
-                                        </h2>
-                                        <p class="font-normal text-sm text-white w-full text-justify">
-                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
-                                            doloremque, quisquam architecto possimus odio accusamus...
-                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
-                                        </p>
-                                    </div>
-                                    <!-- 3 -->
-                                    <div class="grid lg:grid-cols-[auto_1fr] gap-2 items-start">
-                                        <h2 class="font-normal text-sm text-white whitespace-nowrap">
-                                            2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
-                                        </h2>
-                                        <p class="font-normal text-sm text-white w-full text-justify">
-                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
-                                            doloremque, quisquam architecto possimus odio accusamus...
-                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
-                                            perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- Kanan -->
-                <div class="flex w-full lg:w-1/2 mt-5 lg:mt-0">
-                    <div class="flex flex-col w-full">
-                        <div class="h-[385px] bg-[#F2F9FF] overflow-y-scroll">
-                            <div class="flex flex-col lg:flex-row mb-5">
-                                <!-- 1 -->
-                                <div class="bg-white mr-0 mb-5 rounded-md lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative">
-                                    <div class="flex justify-between">
-                                        <h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
-                                        <div class="relative flex h-4 w-4">
-                                            <span
-                                                class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
-                                            <span
-                                                class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
-                                        </div>
-                                    </div>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">Port 0</p>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">Offline</p>
-                                    <p class="text-[#00000099] font-normal text-sm">XN5000</p>
-                                </div>
-                                <!-- 2 -->
-                                <div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
-                                    <div class="flex justify-between">
-                                        <h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
-                                        <div class="relative flex h-4 w-4">
-                                            <span
-                                                class="absolute inline-flex h-full w-full rounded-full bg-[#E10A0A] opacity-75"></span>
-                                            <span
-                                                class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
-                                        </div>
-                                    </div>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">Port 1</p>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">Offline</p>
-                                    <p class="text-[#00000099] font-normal text-sm">XN5000</p>
-                                </div>
-                            </div>
-                            <!-- 3 -->
-                            <div class="flex flex-col lg:flex-row mb-5">
-                                <div class="bg-white rounded-md mr-0 mb-5 lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative">
-                                    <div class="flex justify-between">
-                                        <h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
-                                        <div class="relative flex h-4 w-4">
-                                            <span
-                                                class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
-                                            <span
-                                                class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
-                                        </div>
-                                    </div>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">Port 2</p>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">Offline</p>
-                                    <p class="text-[#00000099] font-normal text-sm">XN5000</p>
-                                </div>
-                                <div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
-                                    <div class="flex justify-between">
-                                        <h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
-                                        <div class="relative flex h-4 w-4">
-                                            <span
-                                                class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
-                                            <span
-                                                class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
-                                        </div>
-                                    </div>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">Port 3</p>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">Offline</p>
-                                    <p class="text-[#00000099] font-normal text-sm">XN5000</p>
-                                </div>
-                            </div>
-                            <!-- 4 -->
-                            <div class="flex flex-col lg:flex-row mb-5">
-                                <div class="bg-white rounded-md mr-0 mb-5 lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative">
-                                    <div class="flex justify-between">
-                                        <h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
-                                        <div class="relative flex h-4 w-4">
-                                            <span
-                                                class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
-                                            <span
-                                                class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
-                                        </div>
-                                    </div>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">Port 2</p>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">Offline</p>
-                                    <p class="text-[#00000099] font-normal text-sm">XN5000</p>
-                                </div>
-                                <div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
-                                    <div class="flex justify-between">
-                                        <h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
-                                        <div class="relative flex h-4 w-4">
-                                            <span
-                                                class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
-                                            <span
-                                                class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
-                                        </div>
-                                    </div>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">Port 3</p>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p>
-                                    <p class="text-[#00000099] font-normal text-sm mb-3">Offline</p>
-                                    <p class="text-[#00000099] font-normal text-sm">XN5000</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
-        <!-- content -->
     </div>
-    <!-- wrapper -->
+
+    <!-- Konten utama -->
+    <div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen">
+        <!-- Bagian Kiri (Logs) -->
+        <div class="bg-black/87 w-full lg:w-1/2 rounded-lg lg:flex flex-col flex-1 overflow-hidden">
+            <div class="pl-4 pt-2 lg:pl-6 text-white font-medium text-lg rounded-lg">LOGS</div>
+
+            <!-- LOGS -->
+            <div class="pb-10 pt-2 pl-2 pr-2 flex-1 overflow-auto h-full lg:pb-0">
+                <!-- Baris 1 -->
+                <div class="flex flex-wrap lg:flex-nowrap gap-4 items-start mb-5 p-0 lg:p-2">
+                    <h2 class="font-normal text-sm text-white whitespace-nowrap p-2">
+                        2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
+                    </h2>
+                    <p class="font-normal text-sm text-white w-full lg:flex-1 text-justify pl-2">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
+                        doloremque, quisquam architecto possimus odio accusamus...
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
+                        perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
+                    </p>
+                </div>
+                <!-- Baris 2 -->
+                <div class="mb-0 flex flex-wrap lg:flex-nowrap gap-4 items-start lg:mb-5 p-2">
+                    <h2 class="font-normal text-sm text-white whitespace-nowrap p-2">
+                        2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
+                    </h2>
+                    <p class="font-normal text-sm text-white w-full lg:flex-1 text-justify pl-2">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
+                        doloremque, quisquam architecto possimus odio accusamus...
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
+                        perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Bagian Kanan (PORT STATUS) -->
+        <div class="w-full lg:w-1/2 rounded-lg flex flex-col flex-1 overflow-auto">
+            <div class="flex flex-row">
+                <div class="flex flex-col w-full lg:flex-row mb-5">
+                    <!-- 1 -->
+                    <div class="bg-white mr-0 mb-5 rounded-md lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative">
+                        <div class="flex justify-between">
+                            <h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
+                            <div class="relative flex h-4 w-4">
+                                <span
+                                    class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
+                                <span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
+                            </div>
+                        </div>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
+                    </div>
+                    <!-- 2 -->
+                    <div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
+                        <div class="flex justify-between">
+                            <h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
+                            <div class="relative flex h-4 w-4">
+                                <span
+                                    class="absolute inline-flex h-full w-full rounded-full bg-[#E10A0A] opacity-75"></span>
+                                <span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
+                            </div>
+                        </div>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
+                    </div>
+                </div>
+            </div>
+            <div class="flex flex-row">
+                <div class="flex flex-col w-full lg:flex-row mb-5">
+                    <!-- 1 -->
+                    <div class="bg-white mr-0 mb-5 rounded-md lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative">
+                        <div class="flex justify-between">
+                            <h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
+                            <div class="relative flex h-4 w-4">
+                                <span
+                                    class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
+                                <span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
+                            </div>
+                        </div>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
+                    </div>
+                    <!-- 2 -->
+                    <div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
+                        <div class="flex justify-between">
+                            <h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
+                            <div class="relative flex h-4 w-4">
+                                <span
+                                    class="absolute inline-flex h-full w-full rounded-full bg-[#E10A0A] opacity-75"></span>
+                                <span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
+                            </div>
+                        </div>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
+                    </div>
+                </div>
+            </div>
+        </div>s
+    </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/v1/settings.html b/v1/settings.html
index 8fed05c..c9e2dec 100644
--- a/v1/settings.html
+++ b/v1/settings.html
@@ -170,10 +170,10 @@
                                 <span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
                             </div>
                         </div>
-                        <p class="text-[#00000099] font-normal text-sm mb-3">Port 0</p>
-                        <p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p>
-                        <p class="text-[#00000099] font-normal text-sm mb-3">Offline</p>
-                        <p class="text-[#00000099] font-normal text-sm">XN5000</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
                     </div>
                     <!-- 2 -->
                     <div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
@@ -185,10 +185,10 @@
                                 <span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
                             </div>
                         </div>
-                        <p class="text-[#00000099] font-normal text-sm mb-3">Port 1</p>
-                        <p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p>
-                        <p class="text-[#00000099] font-normal text-sm mb-3">Offline</p>
-                        <p class="text-[#00000099] font-normal text-sm">XN5000</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
                     </div>
                 </div>
             </div>
@@ -204,10 +204,10 @@
                                 <span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
                             </div>
                         </div>
-                        <p class="text-[#00000099] font-normal text-sm mb-3">Port 0</p>
-                        <p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p>
-                        <p class="text-[#00000099] font-normal text-sm mb-3">Offline</p>
-                        <p class="text-[#00000099] font-normal text-sm">XN5000</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
                     </div>
                     <!-- 2 -->
                     <div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
@@ -219,10 +219,10 @@
                                 <span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
                             </div>
                         </div>
-                        <p class="text-[#00000099] font-normal text-sm mb-3">Port 1</p>
-                        <p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p>
-                        <p class="text-[#00000099] font-normal text-sm mb-3">Offline</p>
-                        <p class="text-[#00000099] font-normal text-sm">XN5000</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
+                        <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
                     </div>
                 </div>
             </div>
