From 3a9e446afc09b70f753f56b03c57de43af3b500b Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Thu, 6 Mar 2025 15:38:29 +0700
Subject: [PATCH] step 6 : slicing dashboard and menu

---
 v1/dashboard.html | 192 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 187 insertions(+), 5 deletions(-)
diff --git a/v1/dashboard.html b/v1/dashboard.html
index 4be7255..3562cea 100644
--- a/v1/dashboard.html
+++ b/v1/dashboard.html
@@ -13,9 +13,9 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
 </head>
 
-<body>
+<body class="bg-[#F2F9FF]">
     <!-- wrapper -->
-    <div class="bg-[#F2F9FF]">
+    <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">
@@ -64,8 +64,7 @@
                                         <span class="material-symbols-outlined text-black/87">
                                             calculate
                                         </span>
-                                        Assay
-                                        Calculation
+                                        Result
                                     </div>
                                 </a>
                             </li>
@@ -106,7 +105,7 @@
                             </a>
                         </li>
                         <li>
-                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> ASSAY CALC
+                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> RESULT
                             </a>
                         </li>
                         <li>
@@ -129,6 +128,189 @@
             </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-2">
+                                        <h2 class="font-normal text-sm text-white">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">
+                                            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...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-2">
+                                        <h2 class="font-normal text-sm text-white">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">
+                                            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...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-2">
+                                        <h2 class="font-normal text-sm text-white">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">
+                                            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...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 -->
 </body>
