Fix recovery layout and interactive assets

This commit is contained in:
Philip Guzman
2026-07-01 16:03:28 -07:00
parent da72419ce9
commit 139822f8a5
4 changed files with 31 additions and 12 deletions
+11 -10
View File
@@ -5,8 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark">
<title>Serato Doctor</title>
<link rel="stylesheet" href="/app.css">
<link rel="stylesheet" href="/recovery.css">
<link rel="stylesheet" href="/app.css?v=3">
<link rel="stylesheet" href="/recovery.css?v=3">
<link rel="stylesheet" href="/layout-fixes.css?v=3">
</head>
<body>
<div class="ambient ambient-one"></div>
@@ -57,13 +58,6 @@
<div id="error-message" class="error" role="alert" hidden></div>
</section>
<section id="recovery" class="recovery-panel panel">
<div class="section-heading"><div><p class="eyebrow">Safety net</p><h2>Backup recovery</h2></div><button id="load-backups" type="button">Check backups</button></div>
<p>Review every repair snapshot saved for this Serato library. Older backups remain available after restarting Serato Doctor.</p>
<div id="backup-summary" class="backup-summary">Enter your Serato folder above, then check backups.</div>
<div id="backup-list" class="backup-list"></div>
</section>
<section id="dashboard" class="results" aria-live="polite" hidden>
<div class="section-heading"><div><p class="eyebrow">Latest analysis</p><h2>Library health</h2></div><span id="analysis-time"></span></div>
<div class="hero-grid">
@@ -115,8 +109,15 @@
<div id="repair-message" class="repair-message" role="status"></div>
</div>
</section>
<section id="recovery" class="recovery-panel panel">
<div class="section-heading"><div><p class="eyebrow">Safety net</p><h2>Backup recovery</h2></div><button id="load-backups" type="button">Check backups</button></div>
<p>Repair backups appear here automatically before any duplicate is consolidated. Review saved snapshots, disk usage, and restore history.</p>
<div id="backup-summary" class="backup-summary">Analyze your library, then choose a duplicate to preview its automatic backup.</div>
<div id="backup-list" class="backup-list"></div>
</section>
</main>
</div>
<script src="/app.js" defer></script>
<script src="/app.js?v=3" defer></script>
</body>
</html>
+9
View File
@@ -0,0 +1,9 @@
.recovery-panel {
margin-top: 42px;
}
@media (max-width: 680px) {
.recovery-panel {
margin-top: 28px;
}
}