From 412714bb994244f0c4fd74326ec65ccd540d2e2a Mon Sep 17 00:00:00 2001
From: sindhu <albertussindhu15@gmail.com>
Date: Thu, 6 Mar 2025 08:40:45 +0700
Subject: [PATCH] step 5 : navbar mobile, tablet & laptop up

---
 images/avatar.png | Bin 0 -> 3125 bytes
 v1/dashboard.html | 136 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 136 insertions(+)
 create mode 100644 images/avatar.png
 create mode 100644 v1/dashboard.html

diff --git a/images/avatar.png b/images/avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..05e8694d12eb0c12e8474bc3f67ce384bd47e839
GIT binary patch
literal 3125
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
P00000NkvXXu0mjf^RUpn

literal 0
HcmV?d00001

diff --git a/v1/dashboard.html b/v1/dashboard.html
new file mode 100644
index 0000000..4be7255
--- /dev/null
+++ b/v1/dashboard.html
@@ -0,0 +1,136 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login 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>
+    <!-- wrapper -->
+    <div class="bg-[#F2F9FF]">
+        <!-- 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>
+                    <div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity" @click="open = false"></div>
+
+                    <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"
+                        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 space-x-2 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 space-x-2 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 space-x-2 gap-2">
+                                        <span class="material-symbols-outlined text-black/87">
+                                            calculate
+                                        </span>
+                                        Assay
+                                        Calculation
+                                    </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 space-x-2 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 space-x-2 gap-2">
+                                        <span class="material-symbols-outlined text-black/87">
+                                            person
+                                        </span>
+                                        Akun
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- menu mobile appear -->
+                <!-- menu large appear -->
+                <nav aria-label="Global" class="hidden lg:block">
+                    <ul class="flex items-center gap-6 text-sm">
+                        <li>
+                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> SETTING </a>
+                        </li>
+                        <li>
+                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> ASSAY FORMAT
+                            </a>
+                        </li>
+                        <li>
+                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> ASSAY CALC
+                            </a>
+                        </li>
+                        <li>
+                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> ONLINE </a>
+                        </li>
+                        <li>
+                            <img src="../images/avatar.png" class="mr-3">
+                        </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 -->
+    </div>
+    <!-- wrapper -->
+</body>
+
+</html>
\ No newline at end of file