Files
serato-doctor/serato_doctor/webui/index.html
2026-07-01 07:52:33 -07:00

88 lines
5.0 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
</head>
<body>
<div class="ambient ambient-one"></div>
<div class="ambient ambient-two"></div>
<div class="shell">
<aside class="sidebar">
<a class="brand" href="/" aria-label="Serato Doctor home">
<span class="brand-mark">SD</span>
<span><strong>Serato</strong><small>Doctor</small></span>
</a>
<nav aria-label="Primary navigation">
<a class="nav-item active" href="#dashboard"><span></span> Dashboard</a>
<a class="nav-item" href="#scan"><span></span> New analysis</a>
<a class="nav-item" href="#diagnostics"><span></span> Diagnostics</a>
</nav>
<div class="safety-card">
<span class="safety-icon"></span>
<div><strong>Read-only mode</strong><p>Your library will not be modified.</p></div>
</div>
<div class="sidebar-foot">Local interface · v0.1</div>
</aside>
<main>
<header class="topbar">
<div><p class="eyebrow">Library intelligence</p><h1>Good evening.</h1></div>
<div class="status-pill"><span></span> Local &amp; private</div>
</header>
<section id="scan" class="scan-panel panel">
<div class="panel-copy">
<p class="eyebrow">Start here</p>
<h2>Analyze your library</h2>
<p>Point Serato Doctor at your Serato and music folders. We inspect references, duplicates, smart crates, and symlinks without changing a thing.</p>
</div>
<form id="analysis-form">
<label>Serato folder
<input id="serato-path" name="serato" value="~/Music/_Serato_" required>
</label>
<label>Music folder
<input id="music-path" name="music" value="~/Music/Jukebox" required>
</label>
<label class="wide">Historical reference roots <span>optional · one per line</span>
<textarea id="reference-roots" rows="2" placeholder="/Users/old-user/OneDrive/Jukebox"></textarea>
</label>
<button id="analyze-button" type="submit"><span>Analyze library</span><b></b></button>
</form>
<div id="error-message" class="error" role="alert" hidden></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">
<article class="score-card panel">
<div class="score-ring" id="score-ring"><div><strong id="health-score"></strong><span>health</span></div></div>
<div><p class="score-label">Reference integrity</p><h3 id="health-message">Ready to analyze</h3><p id="score-basis">We only score evidence we can defend.</p></div>
</article>
<div class="metrics-grid">
<article class="metric panel"><span>Tracks</span><strong data-field="disk_tracks"></strong><small>audio files found</small></article>
<article class="metric panel warning"><span>Broken references</span><strong data-field="missing_references"></strong><small>static crate entries</small></article>
<article class="metric panel"><span>Unused tracks</span><strong data-field="unused_tracks"></strong><small>not referenced by crates</small></article>
<article class="metric panel"><span>Suggested matches</span><strong data-field="suggested_matches"></strong><small>explainable candidates</small></article>
</div>
</div>
<div id="diagnostics" class="diagnostics panel">
<div class="section-heading"><div><p class="eyebrow">Full picture</p><h2>Diagnostics</h2></div><span class="read-only-tag">No changes made</span></div>
<div class="diagnostic-list">
<div><span class="diag-icon violet"></span><p><strong>Crates</strong><small><b data-field="static_crates"></b> static · <b data-field="smart_crates"></b> smart · <b data-field="dynamic_references_excluded"></b> dynamic references excluded</small></p></div>
<div><span class="diag-icon amber"></span><p><strong>Duplicate filenames</strong><small><b data-field="duplicate_filename_groups"></b> exact groups · <b data-field="duplicate_files"></b> extra files</small></p></div>
<div><span class="diag-icon blue"></span><p><strong>Cloud conflicts</strong><small><b data-field="suspected_cloud_conflict_groups"></b> suspected groups · <b data-field="suspected_cloud_conflict_files"></b> extra files</small></p></div>
<div><span class="diag-icon red"></span><p><strong>Broken symlinks</strong><small><b data-field="broken_symlinks"></b> unresolved links</small></p></div>
</div>
</div>
</section>
</main>
</div>
<script src="/app.js" defer></script>
</body>
</html>