Michael
58d0009849
Move app.css and shell.js into layout-review/ alongside the .html files and reference them by bare filename; drop the assets/ subfolder. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
84 lines
3.3 KiB
HTML
84 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Layout review — Combine Files</title>
|
|
<link rel="stylesheet" href="app.css">
|
|
</head>
|
|
<body data-page="07_multi_file_merger">
|
|
<div class="dt-app">
|
|
<aside class="dt-sidebar" id="dt-sidebar"></aside>
|
|
<main class="dt-main">
|
|
<div class="dt-review-banner">
|
|
<span class="dt-mi">visibility</span>
|
|
<span>Static layout preview of <strong>Combine Files</strong> — a Coming-Soon tool. The page is a stub: an "under development" notice, a planned-features list, a working multi-file uploader, and disabled placeholder options. <a href="index.html">All pages →</a></span>
|
|
</div>
|
|
<div class="dt-main-inner">
|
|
|
|
<!-- Tool header -->
|
|
<div class="dt-tool-header">
|
|
<h1>Combine Files</h1>
|
|
<button class="dt-help-btn"><span class="dt-mi">help_outline</span> Help</button>
|
|
</div>
|
|
<p class="dt-tool-caption">Combine several CSV or Excel files into one — even if columns differ.</p>
|
|
|
|
<!-- Under-development notice (st.info) -->
|
|
<div class="dt-alert info">
|
|
<span class="dt-mi">info</span>
|
|
<span>This tool is under development.</span>
|
|
</div>
|
|
|
|
<!-- Planned features (st.markdown) -->
|
|
<p><strong>Features:</strong></p>
|
|
<ul style="font-size:14px;line-height:1.55;color:var(--ink);margin:0 0 0.6rem;padding-left:22px">
|
|
<li>Import multiple CSV/Excel files at once</li>
|
|
<li>Automatic schema alignment (matching columns by name)</li>
|
|
<li>Append mode: stack files vertically (union)</li>
|
|
<li>Join mode: merge files on shared key columns</li>
|
|
<li>Handle mismatched columns (fill missing with nulls or drop)</li>
|
|
<li>Source file tracking column</li>
|
|
</ul>
|
|
|
|
<hr class="dt-divider">
|
|
|
|
<!-- Multi-file upload (functional) -->
|
|
<label class="dt-label">Import CSV or Excel files</label>
|
|
<div class="dt-uploader">
|
|
<div class="dt-uploader-text">
|
|
<span class="hint"><span class="dt-mi" style="vertical-align:-4px">upload_file</span> Drag and drop files here</span>
|
|
<span class="sub">CSV, TSV, XLSX, XLS · multiple files allowed</span>
|
|
</div>
|
|
<button class="dt-btn">Browse files</button>
|
|
</div>
|
|
<div class="dt-help-text">Import multiple files to preview. Processing is not yet available.</div>
|
|
|
|
<!-- Placeholder options (all disabled) -->
|
|
<h3>Merge Strategy</h3>
|
|
|
|
<div class="dt-field">
|
|
<label class="dt-label">Mode</label>
|
|
<div class="dt-select" style="color:var(--ink-tertiary);background-color:var(--surface-hover)">Append (stack vertically)</div>
|
|
</div>
|
|
|
|
<div class="dt-field">
|
|
<label class="dt-label">Mismatched columns</label>
|
|
<div class="dt-select" style="color:var(--ink-tertiary);background-color:var(--surface-hover)">Fill with null</div>
|
|
</div>
|
|
|
|
<div class="dt-check on" style="opacity:0.6">
|
|
<span class="box"><span class="dt-mi">check</span></span> Add source filename column
|
|
</div>
|
|
|
|
<hr class="dt-divider">
|
|
|
|
<button class="dt-btn dt-btn-primary dt-btn-block is-disabled">Merge Files</button>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<footer class="dt-footer" id="dt-footer"></footer>
|
|
<script src="shell.js"></script>
|
|
</body>
|
|
</html>
|