sindhu/xport-tailwind-alpine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

step 8 : grid auto fr dan z-index menu di dashboard.html

Browse Source
This commit is contained in:
sindhu
2025-03-06 16:05:54 +07:00
parent a667f66936
commit 6034132975
1 changed files with 47 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
v1/dashboard.html
View File

@@ -28,64 +28,50 @@
</a>
<!-- menu mobile appear -->
<div>
<div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity" @click="open = false"></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"
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 space-x-2 gap-2">
<span class="material-symbols-outlined text-black/87">
settings
</span>
<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 space-x-2 gap-2">
<span class="material-symbols-outlined text-black/87">
edit
</span>
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-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>
<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 space-x-2 gap-2">
<span class="material-symbols-outlined text-black/87">
online_prediction
</span>
<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 space-x-2 gap-2">
<span class="material-symbols-outlined text-black/87">
person
</span>
<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>
@@ -93,23 +79,24 @@
</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>
<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-gray-500/75" href="#"> ASSAY FORMAT
<a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> ASSAY FORMAT
</a>
</li>
<li>
<a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> RESULT
<a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> RESULT
</a>
</li>
<li>
<a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> ONLINE </a>
<a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> ONLINE </a>
</li>
<li>
<img src="../images/avatar.png" class="mr-3">
@@ -138,60 +125,39 @@
<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
<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...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...
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
<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...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...
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
<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...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...
perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
</p>
</div>
</div>
@@ -199,8 +165,6 @@
</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">