454 lines
23 KiB
HTML
454 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Data Protection - Snapshot Manager</title>
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap" rel="stylesheet"/>
|
|
<!-- Icons -->
|
|
<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"/>
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<!-- Theme Configuration -->
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#137fec",
|
|
"background-light": "#f6f7f8",
|
|
"background-dark": "#101922",
|
|
"surface-dark": "#16202a",
|
|
"border-dark": "#324d67",
|
|
"text-secondary": "#92adc9"
|
|
},
|
|
fontFamily: {
|
|
"display": ["Manrope", "sans-serif"]
|
|
},
|
|
borderRadius: {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
/* Custom scrollbar for webkit browsers */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #111a22;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #324d67;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #4a6b8a;
|
|
}
|
|
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.icon-filled {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark text-white font-display overflow-hidden h-screen flex">
|
|
<!-- Global Navigation Sidebar -->
|
|
<aside class="w-64 bg-[#111a22] border-r border-border-dark flex flex-col h-full flex-shrink-0 z-20">
|
|
<div class="flex items-center gap-3 p-4 border-b border-border-dark">
|
|
<div class="bg-center bg-no-repeat bg-cover rounded-full h-10 w-10 shrink-0" data-alt="Abstract blue tech logo gradient" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB3AJm6_-45EJVrywcu9Bfe2jgJC8qjm02SwZMeiJvN8_sR9UYfiwtNYebUlJFuP2X_D9_ppCQPe6xK-FAVaH4q8ObtjuWBNX73GsveMYbuBDyGctR1Fhu5jPiN_OcSBT4OAGPPDTBegjCgyZ2RTkV9GLzyiNeTZluUshePm7h1Rn4fdv1ZgXSWL7LAorhKLC6mrw6TdcdJfeNTBNzOs_8cvJHY_Vu-0Vi8xu_lWm2kjCjtSbGDRJRmxs1hzNOG5xQTNy2OfGm7luM");'></div>
|
|
<div class="flex flex-col overflow-hidden">
|
|
<h1 class="text-white text-base font-bold leading-normal truncate">Backup Appliance</h1>
|
|
<p class="text-text-secondary text-xs font-normal leading-normal truncate">v24.04.1-SCALE</p>
|
|
</div>
|
|
</div>
|
|
<nav class="flex flex-col gap-2 p-3 overflow-y-auto flex-1">
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/5 transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-text-secondary group-hover:text-white">dashboard</span>
|
|
<p class="text-text-secondary group-hover:text-white text-sm font-medium">Dashboard</p>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/5 transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-text-secondary group-hover:text-white">hard_drive</span>
|
|
<p class="text-text-secondary group-hover:text-white text-sm font-medium">Storage</p>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/5 transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-text-secondary group-hover:text-white">network_check</span>
|
|
<p class="text-text-secondary group-hover:text-white text-sm font-medium">Network</p>
|
|
</a>
|
|
<!-- Active State -->
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg bg-[#233648] text-white" href="#">
|
|
<span class="material-symbols-outlined icon-filled text-primary">shield</span>
|
|
<p class="text-white text-sm font-medium">Data Protection</p>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/5 transition-colors group" href="#">
|
|
<span class="material-symbols-outlined text-text-secondary group-hover:text-white">settings</span>
|
|
<p class="text-text-secondary group-hover:text-white text-sm font-medium">System</p>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/5 transition-colors group mt-auto" href="#">
|
|
<span class="material-symbols-outlined text-text-secondary group-hover:text-white">logout</span>
|
|
<p class="text-text-secondary group-hover:text-white text-sm font-medium">Logout</p>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
<!-- Main Content Layout (Tree + Details) -->
|
|
<div class="flex flex-1 h-full overflow-hidden">
|
|
<!-- Dataset Tree View (Secondary Sidebar) -->
|
|
<aside class="w-72 bg-surface-dark border-r border-border-dark flex flex-col h-full overflow-hidden hidden md:flex">
|
|
<div class="p-4 border-b border-border-dark flex justify-between items-center">
|
|
<h3 class="text-sm font-bold text-white uppercase tracking-wider">Datasets</h3>
|
|
<button class="text-text-secondary hover:text-white">
|
|
<span class="material-symbols-outlined text-lg">filter_list</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-2">
|
|
<!-- Tree Item: Root -->
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center gap-2 px-2 py-1.5 rounded bg-primary/20 text-white cursor-pointer">
|
|
<span class="material-symbols-outlined text-sm text-text-secondary">expand_more</span>
|
|
<span class="material-symbols-outlined text-primary text-lg">dns</span>
|
|
<span class="text-sm font-medium truncate">tank</span>
|
|
</div>
|
|
<!-- Children -->
|
|
<div class="pl-4 flex flex-col gap-1 border-l border-border-dark ml-3 my-1">
|
|
<!-- Item 1 (Active) -->
|
|
<div class="flex items-center gap-2 px-2 py-1.5 rounded bg-[#324d67] text-white cursor-pointer relative">
|
|
<div class="absolute w-1 h-full left-0 bg-primary rounded-l"></div>
|
|
<span class="material-symbols-outlined text-sm text-text-secondary">expand_more</span>
|
|
<span class="material-symbols-outlined text-yellow-500 text-lg">folder</span>
|
|
<span class="text-sm font-medium truncate">data</span>
|
|
<!-- Usage bar mini -->
|
|
<div class="ml-auto w-12 h-1 bg-black/40 rounded-full overflow-hidden">
|
|
<div class="h-full bg-green-500 w-[65%]"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Nested Child -->
|
|
<div class="pl-4 flex flex-col gap-1 border-l border-border-dark ml-3 my-1">
|
|
<div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 text-text-secondary hover:text-white cursor-pointer transition-colors">
|
|
<span class="w-4"></span>
|
|
<span class="material-symbols-outlined text-lg">folder</span>
|
|
<span class="text-sm truncate">projects</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 text-text-secondary hover:text-white cursor-pointer transition-colors">
|
|
<span class="w-4"></span>
|
|
<span class="material-symbols-outlined text-lg">folder</span>
|
|
<span class="text-sm truncate">archives</span>
|
|
</div>
|
|
</div>
|
|
<!-- Item 2 -->
|
|
<div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 text-text-secondary hover:text-white cursor-pointer transition-colors">
|
|
<span class="material-symbols-outlined text-sm text-text-secondary">chevron_right</span>
|
|
<span class="material-symbols-outlined text-blue-400 text-lg">featured_play_list</span>
|
|
<span class="text-sm font-medium truncate">vms-storage</span>
|
|
</div>
|
|
<!-- Item 3 -->
|
|
<div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 text-text-secondary hover:text-white cursor-pointer transition-colors">
|
|
<span class="material-symbols-outlined text-sm text-text-secondary">chevron_right</span>
|
|
<span class="material-symbols-outlined text-purple-400 text-lg">storage</span>
|
|
<span class="text-sm font-medium truncate">iscsi-target-01</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Action in Sidebar -->
|
|
<div class="p-3 border-t border-border-dark">
|
|
<button class="w-full py-2 px-3 rounded border border-border-dark text-sm text-text-secondary hover:text-white hover:bg-white/5 flex items-center justify-center gap-2 transition-colors">
|
|
<span class="material-symbols-outlined text-lg">add</span>
|
|
Add Dataset
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Action Area -->
|
|
<main class="flex-1 flex flex-col h-full bg-background-dark overflow-y-auto relative">
|
|
<!-- Breadcrumbs -->
|
|
<div class="px-8 pt-6 pb-2">
|
|
<div class="flex flex-wrap gap-2 items-center">
|
|
<a class="text-text-secondary text-sm font-medium hover:text-primary transition-colors flex items-center gap-1" href="#">
|
|
<span class="material-symbols-outlined text-lg">hard_drive</span> Storage
|
|
</a>
|
|
<span class="text-text-secondary text-sm">/</span>
|
|
<a class="text-text-secondary text-sm font-medium hover:text-primary transition-colors" href="#">ZFS Pools</a>
|
|
<span class="text-text-secondary text-sm">/</span>
|
|
<span class="text-white text-sm font-medium px-2 py-0.5 rounded bg-surface-dark border border-border-dark">tank/data</span>
|
|
</div>
|
|
</div>
|
|
<!-- Page Header -->
|
|
<div class="px-8 py-4 flex flex-wrap justify-between gap-6 items-end">
|
|
<div class="flex flex-col gap-2 max-w-2xl">
|
|
<h1 class="text-white tracking-tight text-3xl font-bold">Snapshot Manager</h1>
|
|
<p class="text-text-secondary text-sm leading-relaxed">Manage automated snapshots, retention policies, and replication tasks for the <span class="text-white font-mono bg-surface-dark px-1 rounded">tank/data</span> dataset.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="flex items-center gap-2 px-4 py-2 bg-surface-dark border border-border-dark rounded-lg text-white text-sm font-medium hover:bg-[#1c2a35] transition-colors">
|
|
<span class="material-symbols-outlined text-lg">settings</span>
|
|
Settings
|
|
</button>
|
|
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors shadow-lg shadow-blue-900/20">
|
|
<span class="material-symbols-outlined text-lg">add_a_photo</span>
|
|
Create Snapshot
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Stats Cards -->
|
|
<div class="px-8 pb-6">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<!-- Stat 1 -->
|
|
<div class="flex flex-col gap-1 p-5 rounded-xl border border-border-dark bg-surface-dark/50 hover:bg-surface-dark transition-colors">
|
|
<div class="flex justify-between items-start">
|
|
<p class="text-text-secondary text-xs font-bold uppercase tracking-wider">Total Snapshots</p>
|
|
<span class="material-symbols-outlined text-primary text-xl">photo_library</span>
|
|
</div>
|
|
<p class="text-white text-2xl font-bold mt-1">1,245</p>
|
|
<div class="flex items-center gap-1 mt-1 text-green-400 text-xs">
|
|
<span class="material-symbols-outlined text-sm">trending_up</span>
|
|
<span>+12 today</span>
|
|
</div>
|
|
</div>
|
|
<!-- Stat 2 -->
|
|
<div class="flex flex-col gap-1 p-5 rounded-xl border border-border-dark bg-surface-dark/50 hover:bg-surface-dark transition-colors">
|
|
<div class="flex justify-between items-start">
|
|
<p class="text-text-secondary text-xs font-bold uppercase tracking-wider">Space Used</p>
|
|
<span class="material-symbols-outlined text-yellow-500 text-xl">pie_chart</span>
|
|
</div>
|
|
<p class="text-white text-2xl font-bold mt-1">2.4 TB</p>
|
|
<div class="w-full bg-[#111a22] rounded-full h-1.5 mt-2">
|
|
<div class="bg-yellow-500 h-1.5 rounded-full" style="width: 45%"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Stat 3 -->
|
|
<div class="flex flex-col gap-1 p-5 rounded-xl border border-border-dark bg-surface-dark/50 hover:bg-surface-dark transition-colors">
|
|
<div class="flex justify-between items-start">
|
|
<p class="text-text-secondary text-xs font-bold uppercase tracking-wider">Reclaimable</p>
|
|
<span class="material-symbols-outlined text-green-400 text-xl">recycling</span>
|
|
</div>
|
|
<p class="text-white text-2xl font-bold mt-1">420 GB</p>
|
|
<p class="text-text-secondary text-xs mt-1">from expired policies</p>
|
|
</div>
|
|
<!-- Stat 4 -->
|
|
<div class="flex flex-col gap-1 p-5 rounded-xl border border-border-dark bg-surface-dark/50 hover:bg-surface-dark transition-colors">
|
|
<div class="flex justify-between items-start">
|
|
<p class="text-text-secondary text-xs font-bold uppercase tracking-wider">Next Scheduled</p>
|
|
<span class="material-symbols-outlined text-purple-400 text-xl">schedule</span>
|
|
</div>
|
|
<p class="text-white text-2xl font-bold mt-1">14:00</p>
|
|
<p class="text-text-secondary text-xs mt-1">Today (Auto-Daily)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tabs -->
|
|
<div class="px-8 border-b border-border-dark flex gap-8">
|
|
<button class="pb-3 text-sm font-medium text-primary border-b-2 border-primary">Snapshots List</button>
|
|
<button class="pb-3 text-sm font-medium text-text-secondary hover:text-white transition-colors">Schedule & Policies</button>
|
|
<button class="pb-3 text-sm font-medium text-text-secondary hover:text-white transition-colors">Replication Tasks</button>
|
|
</div>
|
|
<!-- Toolbar & Filters -->
|
|
<div class="px-8 py-4 flex flex-wrap gap-4 items-center justify-between bg-surface-dark/30">
|
|
<div class="relative flex-1 min-w-[200px] max-w-md">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-text-secondary">search</span>
|
|
<input class="w-full bg-[#111a22] border border-border-dark text-white text-sm rounded-lg pl-10 pr-4 py-2 focus:ring-1 focus:ring-primary focus:border-primary outline-none transition-all placeholder:text-text-secondary/50" placeholder="Filter snapshots..." type="text"/>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="px-3 py-2 text-sm text-text-secondary hover:text-white border border-border-dark rounded bg-[#111a22] hover:bg-[#1c2a35] flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-lg">filter_alt</span> Filter
|
|
</button>
|
|
<button class="px-3 py-2 text-sm text-text-secondary hover:text-white border border-border-dark rounded bg-[#111a22] hover:bg-[#1c2a35] flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-lg">calendar_month</span> Date Range
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Data Table -->
|
|
<div class="flex-1 px-8 pb-8 overflow-hidden flex flex-col">
|
|
<div class="flex-1 overflow-auto rounded-lg border border-border-dark bg-[#111a22]">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="sticky top-0 z-10 bg-surface-dark text-xs font-semibold text-text-secondary uppercase tracking-wider">
|
|
<tr>
|
|
<th class="p-4 border-b border-border-dark w-10">
|
|
<input class="rounded border-border-dark bg-[#111a22] text-primary focus:ring-0 focus:ring-offset-0" type="checkbox"/>
|
|
</th>
|
|
<th class="p-4 border-b border-border-dark">Snapshot Name</th>
|
|
<th class="p-4 border-b border-border-dark">Created</th>
|
|
<th class="p-4 border-b border-border-dark text-right">Used</th>
|
|
<th class="p-4 border-b border-border-dark text-right">Referenced</th>
|
|
<th class="p-4 border-b border-border-dark">Policy</th>
|
|
<th class="p-4 border-b border-border-dark text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sm divide-y divide-border-dark">
|
|
<!-- Row 1 -->
|
|
<tr class="hover:bg-white/5 transition-colors group">
|
|
<td class="p-4">
|
|
<input class="rounded border-border-dark bg-[#111a22] text-primary focus:ring-0 focus:ring-offset-0 opacity-50 group-hover:opacity-100" type="checkbox"/>
|
|
</td>
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-text-secondary">camera_alt</span>
|
|
<span class="font-medium text-white font-mono">auto-2023-10-27-1400</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4 text-text-secondary">Oct 27, 2023 14:00</td>
|
|
<td class="p-4 text-right text-white font-mono">1.2 GB</td>
|
|
<td class="p-4 text-right text-text-secondary font-mono">14.5 TB</td>
|
|
<td class="p-4">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
|
Hourly-Keep-24
|
|
</span>
|
|
</td>
|
|
<td class="p-4 text-right">
|
|
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-white/10">
|
|
<span class="material-symbols-outlined text-lg">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="hover:bg-white/5 transition-colors group">
|
|
<td class="p-4">
|
|
<input class="rounded border-border-dark bg-[#111a22] text-primary focus:ring-0 focus:ring-offset-0 opacity-50 group-hover:opacity-100" type="checkbox"/>
|
|
</td>
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-text-secondary">camera_alt</span>
|
|
<span class="font-medium text-white font-mono">auto-2023-10-27-1300</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4 text-text-secondary">Oct 27, 2023 13:00</td>
|
|
<td class="p-4 text-right text-white font-mono">850 MB</td>
|
|
<td class="p-4 text-right text-text-secondary font-mono">14.5 TB</td>
|
|
<td class="p-4">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
|
Hourly-Keep-24
|
|
</span>
|
|
</td>
|
|
<td class="p-4 text-right">
|
|
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-white/10">
|
|
<span class="material-symbols-outlined text-lg">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3: Manual Snapshot -->
|
|
<tr class="hover:bg-white/5 transition-colors group">
|
|
<td class="p-4">
|
|
<input class="rounded border-border-dark bg-[#111a22] text-primary focus:ring-0 focus:ring-offset-0 opacity-50 group-hover:opacity-100" type="checkbox"/>
|
|
</td>
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-primary">person</span>
|
|
<span class="font-medium text-white font-mono">pre-upgrade-backup</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4 text-text-secondary">Oct 27, 2023 12:45</td>
|
|
<td class="p-4 text-right text-white font-mono">4.1 GB</td>
|
|
<td class="p-4 text-right text-text-secondary font-mono">14.5 TB</td>
|
|
<td class="p-4">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20">
|
|
Manual
|
|
</span>
|
|
</td>
|
|
<td class="p-4 text-right">
|
|
<div class="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-white/10" title="Clone">
|
|
<span class="material-symbols-outlined text-lg">content_copy</span>
|
|
</button>
|
|
<button class="text-text-secondary hover:text-red-400 p-1 rounded hover:bg-red-400/10" title="Rollback">
|
|
<span class="material-symbols-outlined text-lg">history</span>
|
|
</button>
|
|
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-white/10">
|
|
<span class="material-symbols-outlined text-lg">more_vert</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 4 -->
|
|
<tr class="hover:bg-white/5 transition-colors group">
|
|
<td class="p-4">
|
|
<input class="rounded border-border-dark bg-[#111a22] text-primary focus:ring-0 focus:ring-offset-0 opacity-50 group-hover:opacity-100" type="checkbox"/>
|
|
</td>
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-text-secondary">camera_alt</span>
|
|
<span class="font-medium text-white font-mono">auto-2023-10-27-1200</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4 text-text-secondary">Oct 27, 2023 12:00</td>
|
|
<td class="p-4 text-right text-white font-mono">920 MB</td>
|
|
<td class="p-4 text-right text-text-secondary font-mono">14.5 TB</td>
|
|
<td class="p-4">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
|
Hourly-Keep-24
|
|
</span>
|
|
</td>
|
|
<td class="p-4 text-right">
|
|
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-white/10">
|
|
<span class="material-symbols-outlined text-lg">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 5: Locked -->
|
|
<tr class="hover:bg-white/5 transition-colors group">
|
|
<td class="p-4">
|
|
<input class="rounded border-border-dark bg-[#111a22] text-text-secondary cursor-not-allowed opacity-50" disabled="" type="checkbox"/>
|
|
</td>
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-yellow-500">lock</span>
|
|
<span class="font-medium text-white font-mono">daily-2023-10-26</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4 text-text-secondary">Oct 26, 2023 00:00</td>
|
|
<td class="p-4 text-right text-white font-mono">12.5 GB</td>
|
|
<td class="p-4 text-right text-text-secondary font-mono">14.4 TB</td>
|
|
<td class="p-4">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
|
|
Daily-Keep-30
|
|
</span>
|
|
</td>
|
|
<td class="p-4 text-right">
|
|
<button class="text-text-secondary hover:text-white p-1 rounded hover:bg-white/10">
|
|
<span class="material-symbols-outlined text-lg">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="flex justify-between items-center py-4 border-t border-border-dark mt-2">
|
|
<p class="text-xs text-text-secondary">Showing <span class="text-white font-medium">1-5</span> of <span class="text-white font-medium">1,245</span> snapshots</p>
|
|
<div class="flex gap-2">
|
|
<button class="px-3 py-1 text-xs font-medium text-text-secondary hover:text-white border border-border-dark rounded bg-surface-dark hover:bg-[#1c2a35] disabled:opacity-50">Previous</button>
|
|
<button class="px-3 py-1 text-xs font-medium text-text-secondary hover:text-white border border-border-dark rounded bg-surface-dark hover:bg-[#1c2a35]">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Floating Feedback/Status Toast (Bottom Right) -->
|
|
<div class="absolute bottom-6 right-8 max-w-sm w-full animate-pulse">
|
|
<div class="bg-surface-dark border border-border-dark rounded-lg shadow-2xl p-4 flex items-start gap-3">
|
|
<div class="p-1 rounded-full bg-blue-500/20 text-blue-400 shrink-0">
|
|
<span class="material-symbols-outlined text-xl">sync</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<p class="text-sm font-medium text-white">Replication in progress</p>
|
|
<p class="text-xs text-text-secondary">Sending 'auto-2023-10-27-1400' to backup-server (45%)</p>
|
|
<div class="w-full bg-[#111a22] h-1 rounded-full mt-1">
|
|
<div class="bg-blue-500 h-1 rounded-full w-[45%]"></div>
|
|
</div>
|
|
</div>
|
|
<button class="text-text-secondary hover:text-white ml-auto">
|
|
<span class="material-symbols-outlined text-sm">close</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body></html> |