sindhu/xport-tailwind-alpine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
32cc43e49065b60290fd2e951cd22a6a13240dd2
xport-tailwind-alpine/v1/dashboard.html

251 lines
14 KiB
HTML
Raw Blame History

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard XPORT</title>
<!-- tailwind cdn -->
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<!-- alpine cdn -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
<!-- material Symbols -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
</head>
<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="settings.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">SETTING</a>
</li>
<li>
<a href="assay_format.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">ASSAY
FORMAT</a>
</li>
<li>
<a href="result.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">RESULT</a>
</li>
<li>
<a href="order.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">ORDER</a>
</li>
<li>
<a href="master_data.html" class="text-black/87 transition font-bold hover:text-[#2196F3]">MASTER
DATA</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>
<!-- 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="settings.html"
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 href="assay_format.html"
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="result.html"
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="order.html"
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>
Order
</div>
</a>
</li>
<li>
<a href="master_data.html"
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>
Master Data
</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>
</div>
</div>
</div>
<!-- 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-[#F0F2F5DE] 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-black/87 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="mb-0 flex flex-wrap lg:flex-nowrap gap-4 items-start lg:mb-5 p-2">
<h2 class="font-normal text-sm text-black/87 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-black/87 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-black/87 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-black/87 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>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink