Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>LicenseCentral - Applications Management</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@300;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-secondary-fixed-variant": "#3a485b",
"surface-dim": "#d2d9f4",
"error-container": "#ffdad6",
"surface-bright": "#faf8ff",
"surface-container-high": "#e2e7ff",
"tertiary-fixed-dim": "#6bd8cb",
"tertiary-container": "#007369",
"on-secondary-container": "#57657a",
"surface-tint": "#004ced",
"on-primary-fixed": "#001452",
"on-secondary": "#ffffff",
"inverse-on-surface": "#eef0ff",
"on-tertiary-fixed-variant": "#005049",
"outline-variant": "#c3c5d9",
"surface-container-highest": "#dae2fd",
"on-primary-fixed-variant": "#0038b6",
"outline": "#737688",
"on-secondary-fixed": "#0d1c2e",
"secondary-fixed-dim": "#b9c7df",
"surface-container-low": "#f2f3ff",
"surface-container": "#eaedff",
"secondary-container": "#d5e3fc",
"on-error-container": "#93000a",
"on-surface-variant": "#434656",
"on-tertiary": "#ffffff",
"primary-fixed": "#dde1ff",
"on-error": "#ffffff",
"tertiary-fixed": "#89f5e7",
"on-tertiary-fixed": "#00201d",
"secondary": "#515f74",
"inverse-primary": "#b7c4ff",
"surface-variant": "#dae2fd",
"primary-container": "#0052ff",
"surface": "#faf8ff",
"on-surface": "#131b2e",
"inverse-surface": "#283044",
"primary": "#003ec7",
"secondary-fixed": "#d5e3fc",
"surface-container-lowest": "#ffffff",
"error": "#ba1a1a",
"on-background": "#131b2e",
"on-primary-container": "#dfe3ff",
"on-tertiary-container": "#8bf7e9",
"on-primary": "#ffffff",
"primary-fixed-dim": "#b7c4ff",
"background": "#faf8ff",
"tertiary": "#005851"
},
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;
}
.tonal-shift-no-borders {
border: none !important;
}
.glass-effect {
backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.7);
}
</style>
</head>
<body class="bg-surface font-body text-on-surface antialiased">
<!-- Sidebar Navigation -->
<aside class="h-screen w-64 fixed left-0 top-0 flex flex-col bg-[#f2f3ff] dark:bg-slate-900 border-r border-[#c3c5d9]/10 font-manrope text-sm font-medium z-40">
<div class="px-6 py-8 flex items-center gap-3">
<div class="w-10 h-10 bg-primary-container rounded-lg flex items-center justify-center text-white shadow-lg">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">architecture</span>
</div>
<div>
<h1 class="text-lg font-black tracking-tighter text-[#131b2e] dark:text-white leading-tight">Precision Architect</h1>
<p class="text-[10px] uppercase tracking-widest text-on-surface-variant font-bold opacity-70">Enterprise Management</p>
</div>
</div>
<nav class="flex flex-col py-6 space-y-2 flex-grow overflow-y-auto">
<!-- Active State Logic: Applications is active -->
<a class="bg-white dark:bg-slate-800 text-[#0052FF] shadow-sm rounded-lg mx-2 flex items-center px-4 py-3 gap-3 transition-all duration-200" href="#">
<span class="material-symbols-outlined">apps</span>
<span>Applications</span>
</a>
<a class="text-[#434656] dark:text-slate-400 px-4 py-3 mx-2 hover:bg-[#e2e7ff] dark:hover:bg-slate-800/50 rounded-lg flex items-center gap-3 transition-all duration-200" href="#">
<span class="material-symbols-outlined">domain</span>
<span>Domains</span>
</a>
<a class="text-[#434656] dark:text-slate-400 px-4 py-3 mx-2 hover:bg-[#e2e7ff] dark:hover:bg-slate-800/50 rounded-lg flex items-center gap-3 transition-all duration-200" href="#">
<span class="material-symbols-outlined">mail</span>
<span>Email Services</span>
</a>
<a class="text-[#434656] dark:text-slate-400 px-4 py-3 mx-2 hover:bg-[#e2e7ff] dark:hover:bg-slate-800/50 rounded-lg flex items-center gap-3 transition-all duration-200" href="#">
<span class="material-symbols-outlined">timer</span>
<span>Temp Mail</span>
</a>
<a class="text-[#434656] dark:text-slate-400 px-4 py-3 mx-2 hover:bg-[#e2e7ff] dark:hover:bg-slate-800/50 rounded-lg flex items-center gap-3 transition-all duration-200" href="#">
<span class="material-symbols-outlined">verified_user</span>
<span>Licenses</span>
</a>
</nav>
<div class="p-4 mt-auto">
<button class="w-full bg-gradient-to-r from-primary to-primary-container text-white rounded-xl py-3 px-4 font-semibold text-sm shadow-md active:scale-95 duration-150 flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-sm">add</span>
New Asset
</button>
</div>
<div class="py-6 space-y-1">
<a class="text-[#434656] dark:text-slate-400 px-4 py-2 mx-2 hover:bg-[#e2e7ff] dark:hover:bg-slate-800/50 rounded-lg flex items-center gap-3 text-xs transition-all duration-200" href="#">
<span class="material-symbols-outlined text-lg">help</span>
Help Center
</a>
<a class="text-[#434656] dark:text-slate-400 px-4 py-2 mx-2 hover:bg-[#e2e7ff] dark:hover:bg-slate-800/50 rounded-lg flex items-center gap-3 text-xs transition-all duration-200" href="#">
<span class="material-symbols-outlined text-lg">logout</span>
Log Out
</a>
</div>
</aside>
<!-- Main Content Area -->
<main class="ml-64 min-h-screen bg-surface">
<!-- Top Bar -->
<header class="flex justify-between items-center px-8 h-16 w-full sticky top-0 z-30 bg-[#faf8ff] dark:bg-slate-950 font-manrope antialiased tracking-tight tonal-shift-no-borders">
<div class="flex items-center gap-8">
<h2 class="text-xl font-bold text-[#131b2e] dark:text-slate-100">LicenseCentral</h2>
<nav class="hidden md:flex items-center gap-6">
<a class="text-[#434656] dark:text-slate-400 hover:text-[#0052FF] transition-colors text-sm font-medium" href="#">Dashboard</a>
<a class="text-[#0052FF] font-semibold border-b-2 border-[#0052FF] pb-1 text-sm" href="#">Applications</a>
<a class="text-[#434656] dark:text-slate-400 hover:text-[#0052FF] transition-colors text-sm font-medium" href="#">Analytics</a>
<a class="text-[#434656] dark:text-slate-400 hover:text-[#0052FF] transition-colors text-sm font-medium" href="#">Support</a>
</nav>
</div>
<div class="flex items-center gap-4">
<div class="relative group">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
<input class="bg-surface-container-low border-none rounded-full py-2 pl-10 pr-4 text-sm w-64 focus:ring-2 focus:ring-primary/20 transition-all placeholder:text-outline/60" placeholder="Search applications..." type="text"/>
</div>
<div class="flex items-center gap-2">
<button class="p-2 text-outline hover:bg-[#f2f3ff] rounded-full transition-all active:scale-95">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="p-2 text-outline hover:bg-[#f2f3ff] rounded-full transition-all active:scale-95">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="h-8 w-8 rounded-full bg-surface-container-high overflow-hidden border border-outline-variant/20 ml-2">
<img alt="User profile avatar" class="w-full h-full object-cover" data-alt="Close up professional headshot of a smiling man with neat beard in a minimalist office setting with soft natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCx8gE1sKoojXrTWnO5nrKKeQywd_ygWv5QuljPoxySWu8VbDXxTo6_emtlf41cEdvr1cFVb-8Z677x8Hetk7SoAZOAVnbvTroccp82zokqfiUm_Sq5YgHsRwgF8OveS37e1fERoVgpdHkEKafcGt6Ch8EaAoolZQB1a67qJwZVkeSkOKcWA0iRUcv8d2bDhrWds_yknjznb1pP2Ewko6Xe_GqDKfabPtKlNWgRHs1_C5O-2KFZjmF1mDpdl_BgyihFIsgmXMYEUt4"/>
</div>
</div>
</div>
</header>
<!-- Content Canvas -->
<div class="p-8 max-w-7xl mx-auto">
<!-- Page Header -->
<div class="mb-10 flex justify-between items-end">
<div>
<h3 class="font-headline text-3xl font-extrabold text-on-surface tracking-tight mb-2">Integrated Applications</h3>
<p class="text-on-surface-variant text-body-sm font-medium">Manage and monitor license distribution across your enterprise software stack.</p>
</div>
<div class="flex gap-3">
<button class="flex items-center gap-2 px-4 py-2 bg-surface-container-lowest border border-outline-variant/15 text-on-surface-variant rounded-lg text-sm font-semibold hover:bg-surface-container-low transition-all">
<span class="material-symbols-outlined text-lg">filter_list</span>
Filter
</button>
<button class="flex items-center gap-2 px-4 py-2 bg-surface-container-lowest border border-outline-variant/15 text-on-surface-variant rounded-lg text-sm font-semibold hover:bg-surface-container-low transition-all">
<span class="material-symbols-outlined text-lg">sort</span>
Sort by Name
</button>
</div>
</div>
<!-- Bento-style Grid of Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Card 1: Creative Suite -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-outline-variant/10 hover:shadow-md transition-all group flex flex-col justify-between h-64">
<div>
<div class="flex justify-between items-start mb-4">
<div class="w-12 h-12 rounded-lg bg-[#FF0000]/10 flex items-center justify-center">
<span class="material-symbols-outlined text-[#FF0000]" style="font-variation-settings: 'FILL' 1;">palette</span>
</div>
<span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-tertiary-fixed text-on-tertiary-fixed">Active</span>
</div>
<h4 class="font-headline text-lg font-bold text-on-surface group-hover:text-primary transition-colors">Adobe Creative Cloud</h4>
<div class="mt-4 flex items-center gap-2">
<span class="material-symbols-outlined text-outline text-lg">key</span>
<p class="text-sm font-medium text-on-surface-variant">1,240 <span class="text-outline font-normal">Licenses assigned</span></p>
</div>
</div>
<div class="mt-auto pt-4 border-t border-outline-variant/5 flex items-center justify-between">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full border-2 border-white bg-slate-200 overflow-hidden">
<img class="w-full h-full object-cover" data-alt="Portrait of a male professional" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA4EqTNSOr-FKtt9fFiUp9EOF2MD9Eo8oUz1BxwmtOBo0Okj6MsT_vs2EaYi9Ak1xYIpDATn4rnam_NUbz8mLmJs_z322TjBbYBrs5wv5L76tS3Y6MSQWAgrVUXHfhSIJFBo81i3Oyq5MdMNWrEUg_AU6H9ygHX-3u4V1MFSPIPZnpb_JGiqcTEBDdmvuLgbTyBbixVPmjDMv_zbWdSnKPHJjJvARDBIg0iLwC6KZs5cgcOYoHKsTYn6pmOpiVmGRFaVh56ktp_r8o"/>
</div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-slate-300 overflow-hidden">
<img class="w-full h-full object-cover" data-alt="Portrait of a female professional" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDbIkEeOinkjJaTrTkx0gQsya4fsteHlGgVtR4aQfANxMkeuOAl-aD_gAUfduSH6hUTHXlqhhXEXCJJMz9DBj6Wg5WkHUQg8GOGJsRHCMZ4BlVz2C0amd8AFH01CzFIiutpslzUYAcn69c1q_t2hQPYA_Z07lWgUR4-syRjtGXnBUTkl6a3sOrAcn5aBmL3x2wn21lbIxzrrclNAb9IOs4w3QbWRlOqG2R9QsA2TbmaRU1Cg_vHN6f12KhZQujXqo-oU8UGuGqG5Nc"/>
</div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-surface-container-high flex items-center justify-center text-[8px] font-bold text-on-surface-variant">
+12k
</div>
</div>
<button class="text-primary font-bold text-sm flex items-center gap-1 hover:underline">
Manage
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
<!-- Card 2: Slack -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-outline-variant/10 hover:shadow-md transition-all group flex flex-col justify-between h-64">
<div>
<div class="flex justify-between items-start mb-4">
<div class="w-12 h-12 rounded-lg bg-[#4A154B]/10 flex items-center justify-center">
<span class="material-symbols-outlined text-[#4A154B]" style="font-variation-settings: 'FILL' 1;">chat_bubble</span>
</div>
<span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-tertiary-fixed text-on-tertiary-fixed">Active</span>
</div>
<h4 class="font-headline text-lg font-bold text-on-surface group-hover:text-primary transition-colors">Slack Enterprise</h4>
<div class="mt-4 flex items-center gap-2">
<span class="material-symbols-outlined text-outline text-lg">key</span>
<p class="text-sm font-medium text-on-surface-variant">5,800 <span class="text-outline font-normal">Licenses assigned</span></p>
</div>
</div>
<div class="mt-auto pt-4 border-t border-outline-variant/5 flex items-center justify-between">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full border-2 border-white bg-slate-200 overflow-hidden">
<img class="w-full h-full object-cover" data-alt="Portrait of a female engineer" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBbPek1FWdEj0tMvscubinLxRYy0aL_o8tIwanT17-5MUkfO2sZjlCP_6xIt9gV5WV1hnmVUIElwZHV1NrFWHhT-Qx6-WVVdGiwssH6P2L7Wq3O4Ug5s7VJiptCRIkp8rjw6OCXG2DP1bbyXed3Q4P0ITQjabsBy3gCUo4mwMVLjsbHVZUnTT1YfSUs2gF98Jm4t3yNvC6SxkQpwEHzGftiEBbB81z6wg1n4zKNtryZO7CysJK4BmW7F131ssrxMfKa583RBZI690Q"/>
</div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-surface-container-high flex items-center justify-center text-[8px] font-bold text-on-surface-variant">
+5k
</div>
</div>
<button class="text-primary font-bold text-sm flex items-center gap-1 hover:underline">
Manage
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
<!-- Card 3: Zoom -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-outline-variant/10 hover:shadow-md transition-all group flex flex-col justify-between h-64">
<div>
<div class="flex justify-between items-start mb-4">
<div class="w-12 h-12 rounded-lg bg-[#2D8CFF]/10 flex items-center justify-center">
<span class="material-symbols-outlined text-[#2D8CFF]" style="font-variation-settings: 'FILL' 1;">video_camera_front</span>
</div>
<span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-error-container text-on-error-container">Disabled</span>
</div>
<h4 class="font-headline text-lg font-bold text-on-surface group-hover:text-primary transition-colors">Zoom Video</h4>
<div class="mt-4 flex items-center gap-2">
<span class="material-symbols-outlined text-outline text-lg">key</span>
<p class="text-sm font-medium text-on-surface-variant">0 <span class="text-outline font-normal">Licenses assigned</span></p>
</div>
</div>
<div class="mt-auto pt-4 border-t border-outline-variant/5 flex items-center justify-between">
<div class="bg-surface-container-low px-2 py-1 rounded text-[10px] text-outline italic">
Audit in progress
</div>
<button class="text-primary font-bold text-sm flex items-center gap-1 hover:underline">
Manage
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
<!-- Card 4: Jira -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-outline-variant/10 hover:shadow-md transition-all group flex flex-col justify-between h-64">
<div>
<div class="flex justify-between items-start mb-4">
<div class="w-12 h-12 rounded-lg bg-[#0052CC]/10 flex items-center justify-center">
<span class="material-symbols-outlined text-[#0052CC]" style="font-variation-settings: 'FILL' 1;">task_alt</span>
</div>
<span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-tertiary-fixed text-on-tertiary-fixed">Active</span>
</div>
<h4 class="font-headline text-lg font-bold text-on-surface group-hover:text-primary transition-colors">Atlassian Jira</h4>
<div class="mt-4 flex items-center gap-2">
<span class="material-symbols-outlined text-outline text-lg">key</span>
<p class="text-sm font-medium text-on-surface-variant">3,150 <span class="text-outline font-normal">Licenses assigned</span></p>
</div>
</div>
<div class="mt-auto pt-4 border-t border-outline-variant/5 flex items-center justify-between">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full border-2 border-white bg-slate-200 overflow-hidden">
<img class="w-full h-full object-cover" data-alt="Portrait of a corporate executive" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC67Vhk59DDzgNRXyZC41IupE4JQ1louxPhq3E3fnqLJ6pNTCXubindHtHDkjsOiWOOlUQMa5FpQXManwDFEQSf9jhC8XxNu2TqCLHUMFLo43iRmd-JgVz13wa6o0qBjARsjWBVXIkgrL5KW48T4XRxyTZcPguyKJgKimZZBh2jvq047vb7TmCiGu-KZ-I70VOiHDj9uE-mvd7IpuC-W5sSiE2MT3iRrjEtXyesIJlkcIuCXuonhntt0JVY2PAjme0W2H52bnZTIbU"/>
</div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-surface-container-high flex items-center justify-center text-[8px] font-bold text-on-surface-variant">
+3k
</div>
</div>
<button class="text-primary font-bold text-sm flex items-center gap-1 hover:underline">
Manage
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
<!-- Card 5: Salesforce -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-outline-variant/10 hover:shadow-md transition-all group flex flex-col justify-between h-64">
<div>
<div class="flex justify-between items-start mb-4">
<div class="w-12 h-12 rounded-lg bg-[#00A1E0]/10 flex items-center justify-center">
<span class="material-symbols-outlined text-[#00A1E0]" style="font-variation-settings: 'FILL' 1;">cloud</span>
</div>
<span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-tertiary-fixed text-on-tertiary-fixed">Active</span>
</div>
<h4 class="font-headline text-lg font-bold text-on-surface group-hover:text-primary transition-colors">Salesforce CRM</h4>
<div class="mt-4 flex items-center gap-2">
<span class="material-symbols-outlined text-outline text-lg">key</span>
<p class="text-sm font-medium text-on-surface-variant">850 <span class="text-outline font-normal">Licenses assigned</span></p>
</div>
</div>
<div class="mt-auto pt-4 border-t border-outline-variant/5 flex items-center justify-between">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full border-2 border-white bg-slate-200 overflow-hidden">
<img class="w-full h-full object-cover" data-alt="Portrait of a young professional woman" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCtLiBgZb6F11UZvmHqwMO91KSZCf0ehj9rOYiufwzOaf4Vrlmof25WzpEbt6YT9ZQcYzFWbmtlnFqkG8eqMBIOjfXUusT5Vp1PIRGNAf3pCifiptSrUe3JlNu2BdAj1tQRgye1o-jyy-AzCvltFfSYVEgBbn-8Ufq2Ias-mVFdtnguM3Xl6PN5hgDgqaCe-1fS7SJ-OzHlctLW7Wd0_YjiA7uyXlmh5I2d_s_vrSY7HBl8HaW85cqgqL3VjsOvFVGGSeQYsgL4Wg0"/>
</div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-surface-container-high flex items-center justify-center text-[8px] font-bold text-on-surface-variant">
+800
</div>
</div>
<button class="text-primary font-bold text-sm flex items-center gap-1 hover:underline">
Manage
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
<!-- Card 6: Microsoft 365 -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-outline-variant/10 hover:shadow-md transition-all group flex flex-col justify-between h-64 lg:col-span-1 xl:col-span-1">
<div>
<div class="flex justify-between items-start mb-4">
<div class="w-12 h-12 rounded-lg bg-[#F25022]/10 flex items-center justify-center">
<span class="material-symbols-outlined text-[#F25022]" style="font-variation-settings: 'FILL' 1;">description</span>
</div>
<span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-tertiary-fixed text-on-tertiary-fixed">Active</span>
</div>
<h4 class="font-headline text-lg font-bold text-on-surface group-hover:text-primary transition-colors">Microsoft 365</h4>
<div class="mt-4 flex items-center gap-2">
<span class="material-symbols-outlined text-outline text-lg">key</span>
<p class="text-sm font-medium text-on-surface-variant">12,500 <span class="text-outline font-normal">Licenses assigned</span></p>
</div>
</div>
<div class="mt-auto pt-4 border-t border-outline-variant/5 flex items-center justify-between">
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-xs text-tertiary">trending_up</span>
<span class="text-[10px] text-tertiary font-bold">+12% this month</span>
</div>
<button class="text-primary font-bold text-sm flex items-center gap-1 hover:underline">
Manage
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
<!-- Card 7: GitHub -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-outline-variant/10 hover:shadow-md transition-all group flex flex-col justify-between h-64">
<div>
<div class="flex justify-between items-start mb-4">
<div class="w-12 h-12 rounded-lg bg-[#181717]/10 flex items-center justify-center">
<span class="material-symbols-outlined text-[#181717]" style="font-variation-settings: 'FILL' 1;">terminal</span>
</div>
<span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-tertiary-fixed text-on-tertiary-fixed">Active</span>
</div>
<h4 class="font-headline text-lg font-bold text-on-surface group-hover:text-primary transition-colors">GitHub Enterprise</h4>
<div class="mt-4 flex items-center gap-2">
<span class="material-symbols-outlined text-outline text-lg">key</span>
<p class="text-sm font-medium text-on-surface-variant">420 <span class="text-outline font-normal">Licenses assigned</span></p>
</div>
</div>
<div class="mt-auto pt-4 border-t border-outline-variant/5 flex items-center justify-between">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full border-2 border-white bg-slate-200 overflow-hidden">
<img class="w-full h-full object-cover" data-alt="Portrait of a young male developer" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD-wJ4MMIfOeTqOyGIirxx7XKsyXR89-8796ZQ9V7-kPgO5tzCy9nPsSbYua5NcPRXpfQFx8qonmJAT5pE6QG77MDG1InYZ6rj4jF36D8cOi41xexV2NCW7Aj6rJPzUkvJunQ2uZS3iNh08YqgjXp68_8tQxzIIwtRBpvt2d1wNX8dYJlfdAciyKo6Ovl4s13ACNHjnG3MAlZMuxohHX98xp_VPtHfpamNeXgOcGbTIwocdi4uYVN7z8KiaaWnmbR1rG4D0R0dMOk8"/>
</div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-surface-container-high flex items-center justify-center text-[8px] font-bold text-on-surface-variant">
+400
</div>
</div>
<button class="text-primary font-bold text-sm flex items-center gap-1 hover:underline">
Manage
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
<!-- Add New Integration Placeholder -->
<div class="border-2 border-dashed border-outline-variant/20 rounded-xl p-6 flex flex-col items-center justify-center h-64 hover:bg-surface-container-low/30 hover:border-primary/30 transition-all cursor-pointer group">
<div class="w-14 h-14 rounded-full bg-surface-container-low flex items-center justify-center mb-4 group-hover:bg-primary-container group-hover:text-white transition-all">
<span class="material-symbols-outlined text-2xl">add</span>
</div>
<p class="font-headline font-bold text-on-surface-variant group-hover:text-primary">Add Application</p>
<p class="text-xs text-outline mt-1">Connect new enterprise tools</p>
</div>
</div>
<!-- Dashboard Insight Section (Asymmetric Layout) -->
<div class="mt-12 grid grid-cols-12 gap-6">
<div class="col-span-12 lg:col-span-8 bg-surface-container-low rounded-2xl p-8 relative overflow-hidden">
<div class="relative z-10">
<h4 class="font-headline text-2xl font-bold mb-2">License Utilization Pulse</h4>
<p class="text-on-surface-variant max-w-md mb-6">Your overall software footprint has increased by 14% this quarter. Review inactive licenses to optimize costs.</p>
<div class="flex gap-8">
<div>
<p class="text-[10px] uppercase font-bold tracking-widest text-outline mb-1">Total Licenses</p>
<p class="text-3xl font-black text-primary">24,560</p>
</div>
<div class="h-12 w-[1px] bg-outline-variant/30"></div>
<div>
<p class="text-[10px] uppercase font-bold tracking-widest text-outline mb-1">Unassigned</p>
<p class="text-3xl font-black text-tertiary">1,104</p>
</div>
<div class="h-12 w-[1px] bg-outline-variant/30"></div>
<div>
<p class="text-[10px] uppercase font-bold tracking-widest text-outline mb-1">Potential Savings</p>
<p class="text-3xl font-black text-error">$12,400</p>
</div>
</div>
</div>
<div class="absolute -right-12 -bottom-12 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
<div class="absolute -left-12 -top-12 w-48 h-48 bg-tertiary/5 rounded-full blur-3xl"></div>
</div>
<div class="col-span-12 lg:col-span-4 bg-primary p-8 rounded-2xl text-white flex flex-col justify-between shadow-xl shadow-primary/10">
<div>
<span class="material-symbols-outlined text-4xl mb-4" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
<h4 class="font-headline text-xl font-bold mb-2">Architect Pro Tip</h4>
<p class="text-sm opacity-90 leading-relaxed">Automate license reclamation for users inactive for more than 30 days. You can set this policy globally across all active applications.</p>
</div>
<button class="mt-6 w-full py-3 bg-white text-primary rounded-xl font-bold text-sm active:scale-95 duration-150 shadow-lg">
Enable Automation
</button>
</div>
</div>
</div>
</main>
<!-- Floating Action Button (Suppressed based on logic for details screens, but active for this management dashboard) -->
<div class="fixed bottom-8 right-8 z-50">
<button class="h-14 w-14 rounded-full bg-gradient-to-tr from-primary to-primary-container text-white shadow-2xl flex items-center justify-center hover:scale-110 active:scale-90 transition-all group">
<span class="material-symbols-outlined text-2xl group-hover:rotate-90 transition-transform duration-300">add</span>
</button>
</div>
</body></html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
15
Requests
5
Domains
3647KB
Transfer Size
3946KB
Content Size
876.0ms
Dom Content Loaded
1,072.0ms
First Paint
1,318.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...