step 6 : slicing dashboard and menu
This commit is contained in:
sindhu
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user