270 lines
15 KiB
HTML
270 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>Sentinel Accounts - Account Details</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap"
|
|
rel="stylesheet" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
|
rel="stylesheet" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
|
rel="stylesheet" />
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"on-error-container": "#752121",
|
|
"background": "#f7f9fb",
|
|
"secondary-dim": "#465468",
|
|
"tertiary-dim": "#54506b",
|
|
"outline": "#717c82",
|
|
"on-secondary-container": "#455367",
|
|
"error-dim": "#4e0309",
|
|
"primary-fixed": "#dde1ff",
|
|
"on-primary-fixed": "#0732a3",
|
|
"surface-variant": "#d9e4ea",
|
|
"primary-dim": "#2848b7",
|
|
"on-tertiary": "#fcf7ff",
|
|
"surface": "#f7f9fb",
|
|
"primary-container": "#dde1ff",
|
|
"inverse-on-surface": "#9a9d9f",
|
|
"error": "#9f403d",
|
|
"on-primary": "#f8f7ff",
|
|
"on-surface-variant": "#566166",
|
|
"tertiary-container": "#e3dbfd",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-dim": "#cfdce3",
|
|
"tertiary-fixed-dim": "#d4cdee",
|
|
"inverse-surface": "#0b0f10",
|
|
"on-primary-fixed-variant": "#3352c0",
|
|
"surface-tint": "#3755c3",
|
|
"secondary-fixed": "#d5e3fc",
|
|
"secondary-fixed-dim": "#c7d5ed",
|
|
"secondary": "#526074",
|
|
"tertiary-fixed": "#e3dbfd",
|
|
"on-secondary-fixed-variant": "#4e5c71",
|
|
"on-primary-container": "#2747b6",
|
|
"primary-fixed-dim": "#cad2ff",
|
|
"surface-container-highest": "#d9e4ea",
|
|
"surface-container-low": "#f0f4f7",
|
|
"surface-container": "#e8eff3",
|
|
"on-tertiary-fixed-variant": "#5b5672",
|
|
"secondary-container": "#d5e3fc",
|
|
"inverse-primary": "#6d89fa",
|
|
"outline-variant": "#a9b4b9",
|
|
"on-secondary-fixed": "#324053",
|
|
"on-surface": "#2a3439",
|
|
"surface-container-high": "#e1e9ee",
|
|
"on-background": "#2a3439",
|
|
"on-tertiary-fixed": "#3e3a54",
|
|
"primary": "#3755c3",
|
|
"on-tertiary-container": "#514d68",
|
|
"on-error": "#fff7f6",
|
|
"on-secondary": "#f8f7ff",
|
|
"tertiary": "#605c78",
|
|
"error-container": "#fe8983",
|
|
"surface-bright": "#f7f9fb"
|
|
},
|
|
fontFamily: {
|
|
"headline": ["Manrope"],
|
|
"body": ["Inter"],
|
|
"label": ["Inter"]
|
|
},
|
|
borderRadius: { "DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem" },
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-family: 'Manrope', sans-serif;
|
|
}
|
|
|
|
.glass-overlay {
|
|
backdrop-blur: 12px;
|
|
background: rgba(247, 249, 251, 0.8);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-background text-on-surface overflow-hidden h-screen flex flex-col">
|
|
<!-- 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">
|
|
<!-- 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">
|
|
<div class="text-lg font-extrabold tracking-tighter text-[#2a3439]">Sentinel Accounts</div>
|
|
<div class="flex items-center gap-6">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
<span class="material-symbols-outlined">help_outline</span>
|
|
</div>
|
|
</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 class="flex items-center gap-3 px-6 py-3">
|
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span> Dashboard
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
<!-- Mock Table Stage -->
|
|
<main class="flex-1 p-8 bg-background">
|
|
<div class="h-12 w-48 bg-surface-container-high rounded-xl mb-6"></div>
|
|
<div
|
|
class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden">
|
|
<div
|
|
class="h-12 border-b border-outline-variant/10 bg-surface-container-low px-6 flex items-center gap-4">
|
|
<div class="h-4 w-4 bg-outline-variant/20 rounded"></div>
|
|
<div class="h-4 w-24 bg-outline-variant/20 rounded"></div>
|
|
<div class="h-4 w-32 bg-outline-variant/20 rounded ml-auto"></div>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div class="h-10 w-full bg-surface-container-low/50 rounded-lg"></div>
|
|
<div class="h-10 w-full bg-surface-container-low/50 rounded-lg"></div>
|
|
<div class="h-10 w-full bg-surface-container-low/50 rounded-lg"></div>
|
|
<div class="h-10 w-full bg-surface-container-low/50 rounded-lg"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<!-- Modal Overlay -->
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center bg-on-surface/30 backdrop-blur-[2px]">
|
|
<!-- Dialog Container -->
|
|
<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">
|
|
<!-- Modal Header -->
|
|
<div class="px-8 py-6 border-b border-surface-container flex justify-between items-center">
|
|
<div>
|
|
<span
|
|
class="text-[0.625rem] font-bold uppercase tracking-[0.1em] text-on-surface-variant block mb-1">Resource
|
|
Details</span>
|
|
<h2 class="text-2xl font-extrabold text-on-surface tracking-tight">Account Details</h2>
|
|
</div>
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors text-on-surface-variant">
|
|
<span class="material-symbols-outlined" data-icon="close">close</span>
|
|
</button>
|
|
</div>
|
|
<!-- Modal Content (Bento-style layout for metadata) -->
|
|
<div class="p-8 space-y-8">
|
|
<!-- Service Info Section -->
|
|
<div class="flex items-center gap-5 p-5 bg-surface-container-low rounded-xl">
|
|
<div class="w-14 h-14 bg-white rounded-xl shadow-sm flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary text-3xl" data-icon="cloud">cloud</span>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-bold text-on-surface-variant uppercase tracking-wider mb-0.5">Cloud
|
|
Infrastructure</div>
|
|
<div class="text-xl font-bold text-on-surface">AWS Production</div>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<!-- Core Details Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Username Field -->
|
|
<div class="space-y-2">
|
|
<label
|
|
class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1">Username</label>
|
|
<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="alternate_email">alternate_email</span>
|
|
<span class="text-sm font-medium text-on-surface">admin.aws_prod</span>
|
|
<button class="ml-auto text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-base"
|
|
data-icon="content_copy">content_copy</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Password Field -->
|
|
<div class="space-y-2">
|
|
<label
|
|
class="text-[0.65rem] font-bold uppercase tracking-widest text-on-surface-variant ml-1">Password</label>
|
|
<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
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer Actions -->
|
|
<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">
|
|
Close
|
|
</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">
|
|
<span class="material-symbols-outlined text-base" data-icon="edit">edit</span>
|
|
Edit Account
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |