DungTT/ManagerAccount
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dialog

Browse Source
This commit is contained in:
Tran Tien Dung
2026-03-31 10:20:35 +07:00
parent 209b68c3f5
commit 0c1ca1d923
1 changed files with 183 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

320
codedialog.html
View File

@@ -1,14 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="light" lang="en"><head> <html class="light" lang="en">
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/> <head>
<title>Sentinel Accounts - Account Details</title> <meta charset="utf-8" />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet"/> <title>Sentinel Accounts - Account Details</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/> <link
<script id="tailwind-config"> href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&amp;family=Inter:wght@400;500;600&amp;display=swap"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
rel="stylesheet" />
<script id="tailwind-config">
tailwind.config = { tailwind.config = {
darkMode: "class", darkMode: "class",
theme: { theme: {
@@ -71,154 +79,192 @@
"body": ["Inter"], "body": ["Inter"],
"label": ["Inter"] "label": ["Inter"]
}, },
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"}, borderRadius: { "DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem" },
}, },
}, },
} }
</script> </script>
<style> <style>
.material-symbols-outlined { .material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle; vertical-align: middle;
} }
body { font-family: 'Inter', sans-serif; }
h1, h2, h3 { font-family: 'Manrope', sans-serif; } body {
font-family: 'Inter', sans-serif;
}
h1,
h2,
h3 {
font-family: 'Manrope', sans-serif;
}
.glass-overlay { .glass-overlay {
backdrop-blur: 12px; backdrop-blur: 12px;
background: rgba(247, 249, 251, 0.8); background: rgba(247, 249, 251, 0.8);
} }
</style> </style>
</head> </head>
<body class="bg-background text-on-surface overflow-hidden h-screen flex flex-col"> <body class="bg-background text-on-surface overflow-hidden h-screen flex flex-col">
<!-- Blurred Background (Mocking the Accounts Management Table) --> <!-- Blurred Background (Mocking the Accounts Management Table) -->
<div class="fixed inset-0 z-0 blur-[8px] opacity-40 pointer-events-none select-none overflow-hidden flex flex-col"> <div class="fixed inset-0 z-0 blur-[8px] opacity-40 pointer-events-none select-none overflow-hidden flex flex-col">
<!-- Mock TopNavBar (From JSON Guidance) --> <!-- Mock TopNavBar (From JSON Guidance) -->
<header class="flex justify-between items-center w-full px-8 h-16 bg-[#f7f9fb] text-[#5a6a72] font-['Manrope'] text-sm tracking-wide font-medium"> <header
<div class="text-lg font-extrabold tracking-tighter text-[#2a3439]">Sentinel Accounts</div> class="flex justify-between items-center w-full px-8 h-16 bg-[#f7f9fb] text-[#5a6a72] font-['Manrope'] text-sm tracking-wide font-medium">
<div class="flex items-center gap-6"> <div class="text-lg font-extrabold tracking-tighter text-[#2a3439]">Sentinel Accounts</div>
<span class="material-symbols-outlined">notifications</span> <div class="flex items-center gap-6">
<span class="material-symbols-outlined">help_outline</span> <span class="material-symbols-outlined">notifications</span>
</div> <span class="material-symbols-outlined">help_outline</span>
</header>
<div class="flex flex-1">
<!-- Mock SideNavBar (From JSON Guidance) -->
<aside class="flex flex-col h-full py-6 w-64 bg-[#f0f4f7] text-[#5a6a72] font-['Inter'] text-[0.875rem] font-medium">
<div class="px-6 mb-8">
<div class="text-sm font-black uppercase tracking-[0.05em] text-[#2a3439]">Architectural Sentinel</div>
<div class="text-xs text-on-surface-variant opacity-70">Enterprise Security</div>
</div>
<nav class="flex-1">
<div class="flex items-center gap-3 px-6 py-3 bg-white text-[#3755c3] font-bold border-l-4 border-[#3755c3]">
<span class="material-symbols-outlined" data-icon="vpn_key">vpn_key</span> Account Access
</div> </div>
<div class="flex items-center gap-3 px-6 py-3"> </header>
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span> Dashboard <div class="flex flex-1">
<!-- Mock SideNavBar (From JSON Guidance) -->
<aside
class="flex flex-col h-full py-6 w-64 bg-[#f0f4f7] text-[#5a6a72] font-['Inter'] text-[0.875rem] font-medium">
<div class="px-6 mb-8">
<div class="text-sm font-black uppercase tracking-[0.05em] text-[#2a3439]">Architectural Sentinel
</div> </div>
</nav> <div class="text-xs text-on-surface-variant opacity-70">Enterprise Security</div>
</aside> </div>
<!-- Mock Table Stage --> <nav class="flex-1">
<main class="flex-1 p-8 bg-background"> <div
<div class="h-12 w-48 bg-surface-container-high rounded-xl mb-6"></div> class="flex items-center gap-3 px-6 py-3 bg-white text-[#3755c3] font-bold border-l-4 border-[#3755c3]">
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden"> <span class="material-symbols-outlined" data-icon="vpn_key">vpn_key</span> Account Access
<div class="h-12 border-b border-outline-variant/10 bg-surface-container-low px-6 flex items-center gap-4"> </div>
<div class="h-4 w-4 bg-outline-variant/20 rounded"></div> <div class="flex items-center gap-3 px-6 py-3">
<div class="h-4 w-24 bg-outline-variant/20 rounded"></div> <span class="material-symbols-outlined" data-icon="dashboard">dashboard</span> Dashboard
<div class="h-4 w-32 bg-outline-variant/20 rounded ml-auto"></div> </div>
</div> </nav>
<div class="p-6 space-y-4"> </aside>
<div class="h-10 w-full bg-surface-container-low/50 rounded-lg"></div> <!-- Mock Table Stage -->
<div class="h-10 w-full bg-surface-container-low/50 rounded-lg"></div> <main class="flex-1 p-8 bg-background">
<div class="h-10 w-full bg-surface-container-low/50 rounded-lg"></div> <div class="h-12 w-48 bg-surface-container-high rounded-xl mb-6"></div>
<div class="h-10 w-full bg-surface-container-low/50 rounded-lg"></div> <div
</div> class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden">
</div> <div
</main> class="h-12 border-b border-outline-variant/10 bg-surface-container-low px-6 flex items-center gap-4">
</div> <div class="h-4 w-4 bg-outline-variant/20 rounded"></div>
</div> <div class="h-4 w-24 bg-outline-variant/20 rounded"></div>
<!-- Modal Overlay --> <div class="h-4 w-32 bg-outline-variant/20 rounded ml-auto"></div>
<div class="fixed inset-0 z-50 flex items-center justify-center bg-on-surface/30 backdrop-blur-[2px]"> </div>
<!-- Dialog Container --> <div class="p-6 space-y-4">
<div class="w-full max-w-[640px] bg-surface-container-lowest rounded-xl shadow-[0px_12px_32px_rgba(42,52,57,0.12)] border-none overflow-hidden"> <div class="h-10 w-full bg-surface-container-low/50 rounded-lg"></div>
<!-- Modal Header --> <div class="h-10 w-full bg-surface-container-low/50 rounded-lg"></div>
<div class="px-8 py-6 border-b border-surface-container flex justify-between items-center"> <div class="h-10 w-full bg-surface-container-low/50 rounded-lg"></div>
<div> <div class="h-10 w-full bg-surface-container-low/50 rounded-lg"></div>
<span class="text-[0.625rem] font-bold uppercase tracking-[0.1em] text-on-surface-variant block mb-1">Resource Details</span> </div>
<h2 class="text-2xl font-extrabold text-on-surface tracking-tight">Account Details</h2> </div>
</div> </main>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors text-on-surface-variant"> </div>
<span class="material-symbols-outlined" data-icon="close">close</span> </div>
</button> <!-- Modal Overlay -->
</div> <div class="fixed inset-0 z-50 flex items-center justify-center bg-on-surface/30 backdrop-blur-[2px]">
<!-- Modal Content (Bento-style layout for metadata) --> <!-- Dialog Container -->
<div class="p-8 space-y-8"> <div
<!-- Service Info Section --> class="w-full max-w-[640px] bg-surface-container-lowest rounded-xl shadow-[0px_12px_32px_rgba(42,52,57,0.12)] border-none overflow-hidden">
<div class="flex items-center gap-5 p-5 bg-surface-container-low rounded-xl"> <!-- Modal Header -->
<div class="w-14 h-14 bg-white rounded-xl shadow-sm flex items-center justify-center"> <div class="px-8 py-6 border-b border-surface-container flex justify-between items-center">
<span class="material-symbols-outlined text-primary text-3xl" data-icon="cloud">cloud</span> <div>
</div> <span
<div> class="text-[0.625rem] font-bold uppercase tracking-[0.1em] text-on-surface-variant block mb-1">Resource
<div class="text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-0.5">Cloud Infrastructure</div> Details</span>
<div class="text-xl font-bold text-on-surface">AWS Production</div> <h2 class="text-2xl font-extrabold text-on-surface tracking-tight">Account Details</h2>
</div> </div>
<div class="ml-auto"> <button
<span class="px-3 py-1 bg-primary-container text-on-primary-container text-[0.7rem] font-bold rounded-full uppercase tracking-tighter">Active</span> class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors text-on-surface-variant">
</div> <span class="material-symbols-outlined" data-icon="close">close</span>
</div> </button>
<!-- Core Details Grid --> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <!-- Modal Content (Bento-style layout for metadata) -->
<!-- Username Field --> <div class="p-8 space-y-8">
<div class="space-y-2"> <!-- Service Info Section -->
<label class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1">Username</label> <div class="flex items-center gap-5 p-5 bg-surface-container-low rounded-xl">
<div class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg border border-transparent focus-within:border-primary/40 focus-within:shadow-[0_0_0_2px_rgba(55,85,195,0.05)] transition-all"> <div class="w-14 h-14 bg-white rounded-xl shadow-sm flex items-center justify-center">
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm" data-icon="alternate_email">alternate_email</span> <span class="material-symbols-outlined text-primary text-3xl" data-icon="cloud">cloud</span>
<span class="text-sm font-medium text-on-surface">admin.aws_prod</span> </div>
<button class="ml-auto text-on-surface-variant hover:text-primary transition-colors"> <div>
<span class="material-symbols-outlined text-base" data-icon="content_copy">content_copy</span> <div class="text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-0.5">Cloud
</button> Infrastructure</div>
</div> <div class="text-xl font-bold text-on-surface">AWS Production</div>
</div> </div>
<!-- Password Field --> <div class="ml-auto">
<div class="space-y-2"> <span
<label class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1">Password</label> class="px-3 py-1 bg-primary-container text-on-primary-container text-[0.7rem] font-bold rounded-full uppercase tracking-tighter">Active</span>
<div class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg border border-transparent focus-within:border-primary/40 focus-within:shadow-[0_0_0_2px_rgba(55,85,195,0.05)] transition-all"> </div>
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm" data-icon="lock">lock</span> </div>
<span class="text-sm font-medium text-on-surface">•••••••••••••••</span> <!-- Core Details Grid -->
<button class="ml-auto text-on-surface-variant hover:text-primary transition-colors"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<span class="material-symbols-outlined text-base" data-icon="visibility">visibility</span> <!-- Username Field -->
</button> <div class="space-y-2">
</div> <label
</div> class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1">Username</label>
</div> <div
<!-- Metadata Row (Asymmetric Bento) --> class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg border border-transparent focus-within:border-primary/40 focus-within:shadow-[0_0_0_2px_rgba(55,85,195,0.05)] transition-all">
<div class="grid grid-cols-12 gap-4"> <span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm"
<!-- Owner Card --> data-icon="alternate_email">alternate_email</span>
<div class="col-span-7 bg-surface-container-low/50 p-4 rounded-xl flex items-center gap-4"> <span class="text-sm font-medium text-on-surface">admin.aws_prod</span>
<img alt="Alex Rivera Profile" class="w-10 h-10 rounded-full object-cover ring-2 ring-white" data-alt="Close-up professional portrait of a male systems administrator with a friendly expression in a modern office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBi4gNrkG6OjxYer2iM7vtnmB1_dhArLqll8N46GWZ4YDXLfnwRIIf_bLhZRcMjHCxtKLivBh_JJMTnGRO4kIj0ZCtbVZ61SFhSJvZlPE3ZgNmNCCh7bDXDeFgdWnHKhWAcjDcpLmO02gp5HCU_6GJpLNdIU3pJosKGJsVW_hAhIfp8OYJcepHHf_23k3eQ9ZxkOP4ZR4qu2PU6ZmO2qTCVlJCZVtB-x6RC3YsjcpMNwpyIhSNCIcAvRKTOfU_cb2vtO6t9oD38b6o"/> <button class="ml-auto text-on-surface-variant hover:text-primary transition-colors">
<div> <span class="material-symbols-outlined text-base"
<div class="text-[0.6rem] font-bold uppercase text-on-surface-variant mb-0.5">Account Owner</div> data-icon="content_copy">content_copy</span>
<div class="text-sm font-semibold text-on-surface">Alex Rivera</div> </button>
</div> </div>
</div> </div>
<!-- Date Card --> <!-- Password Field -->
<div class="col-span-5 bg-surface-container-low/50 p-4 rounded-xl"> <div class="space-y-2">
<div class="text-[0.6rem] font-bold uppercase text-on-surface-variant mb-0.5">Date Created</div> <label
<div class="text-sm font-semibold text-on-surface flex items-center gap-2"> class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1">Password</label>
<span class="material-symbols-outlined text-base text-on-surface-variant" data-icon="calendar_today">calendar_today</span> <div
class="flex items-center h-12 px-4 bg-surface-container-highest rounded-lg border border-transparent focus-within:border-primary/40 focus-within:shadow-[0_0_0_2px_rgba(55,85,195,0.05)] transition-all">
<span class="material-symbols-outlined text-on-surface-variant mr-3 text-sm"
data-icon="lock">lock</span>
<span class="text-sm font-medium text-on-surface">•••••••••••••••</span>
<button class="ml-auto text-on-surface-variant hover:text-primary transition-colors">
<span class="material-symbols-outlined text-base"
data-icon="visibility">visibility</span>
</button>
</div>
</div>
</div>
<!-- Metadata Row (Asymmetric Bento) -->
<div class="grid grid-cols-12 gap-4">
<!-- Owner Card -->
<div class="col-span-7 bg-surface-container-low/50 p-4 rounded-xl flex items-center gap-4">
<img alt="Alex Rivera Profile" class="w-10 h-10 rounded-full object-cover ring-2 ring-white"
data-alt="Close-up professional portrait of a male systems administrator with a friendly expression in a modern office environment"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBi4gNrkG6OjxYer2iM7vtnmB1_dhArLqll8N46GWZ4YDXLfnwRIIf_bLhZRcMjHCxtKLivBh_JJMTnGRO4kIj0ZCtbVZ61SFhSJvZlPE3ZgNmNCCh7bDXDeFgdWnHKhWAcjDcpLmO02gp5HCU_6GJpLNdIU3pJosKGJsVW_hAhIfp8OYJcepHHf_23k3eQ9ZxkOP4ZR4qu2PU6ZmO2qTCVlJCZVtB-x6RC3YsjcpMNwpyIhSNCIcAvRKTOfU_cb2vtO6t9oD38b6o" />
<div>
<div class="text-[0.6rem] font-bold uppercase text-on-surface-variant mb-0.5">Account Owner
</div>
<div class="text-sm font-semibold text-on-surface">Alex Rivera</div>
</div>
</div>
<!-- Date Card -->
<div class="col-span-5 bg-surface-container-low/50 p-4 rounded-xl">
<div class="text-[0.6rem] font-bold uppercase text-on-surface-variant mb-0.5">Date Created</div>
<div class="text-sm font-semibold text-on-surface flex items-center gap-2">
<span class="material-symbols-outlined text-base text-on-surface-variant"
data-icon="calendar_today">calendar_today</span>
Oct 24, 2023 Oct 24, 2023
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Footer Actions --> <!-- Footer Actions -->
<div class="px-8 py-6 bg-surface-container-low flex items-center justify-end gap-3"> <div class="px-8 py-6 bg-surface-container-low flex items-center justify-end gap-3">
<button class="px-5 h-11 text-sm font-bold text-on-secondary-container hover:bg-surface-container transition-all rounded-lg"> <button
class="px-5 h-11 text-sm font-bold text-on-secondary-container hover:bg-surface-container transition-all rounded-lg">
Close Close
</button> </button>
<button class="px-6 h-11 text-sm font-bold text-on-primary bg-gradient-to-br from-primary to-primary-dim rounded-lg shadow-sm hover:opacity-90 active:scale-[0.98] transition-all flex items-center gap-2"> <button
<span class="material-symbols-outlined text-base" data-icon="edit">edit</span> class="px-6 h-11 text-sm font-bold text-on-primary bg-gradient-to-br from-primary to-primary-dim rounded-lg shadow-sm hover:opacity-90 active:scale-[0.98] transition-all flex items-center gap-2">
<span class="material-symbols-outlined text-base" data-icon="edit">edit</span>
Edit Account Edit Account
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</body></html> </body>
</html>