114 lines
4.4 KiB
HTML
114 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Colin Knapp - CSV Processing Tool">
|
|
<title>CSV Viewer - Colin Knapp</title>
|
|
<link rel="icon" type="image/x-icon" href="../favicon.ico">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<link rel="stylesheet" href="tool-styles.css?v=2" integrity="sha256-6vUPZLlii+WLObOMBWBE3/mwNmNSmg89f/CqzzecGyc=">
|
|
<link rel="stylesheet" href="csv-tool-fix.css?v=2" integrity="sha256-5oTxos9Qxwhor3qIwHSM12YyIZi5E+tHuFdYER0hXoI=">
|
|
<script src="../theme.js" integrity="sha256-+dDNTo7WAOmn2YC875+vn9oH4UkMwlVOGlARp2uq3A4="></script>
|
|
<script src="../includes.js" integrity="sha256-0VPPSi+jVc1DuyZaSYTq+fnpIfv7ft+ZDenYE6pDPqA="></script>
|
|
<script src="../utils.js" integrity="sha256-ryQsJ+aghKKD/CeXgx8jtsnZT3Epp3EjIw8RyHIq544="></script>
|
|
<style>
|
|
/* Additional inline styles to fix layout */
|
|
.container-fluid {
|
|
max-width: 100%;
|
|
padding: 0 15px;
|
|
}
|
|
.tool-container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
.form-group.full-width {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
#csvInput {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* More aggressive fixes for textarea */
|
|
textarea#csvInput {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
margin: 0 !important;
|
|
padding: 12px !important;
|
|
font-family: 'Courier New', monospace !important;
|
|
}
|
|
|
|
/* Fix container width */
|
|
body {
|
|
max-width: 100% !important;
|
|
padding: 20px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header Include -->
|
|
<div id="header-include"></div>
|
|
|
|
<div class="container-fluid" role="main" id="main-content">
|
|
<h1>CSV Viewer</h1>
|
|
<p>Simply paste CSV data below to view it as a formatted table.</p>
|
|
|
|
<div class="tool-container">
|
|
<div class="tool-controls">
|
|
<h2>Input Data</h2>
|
|
<div class="form-group full-width">
|
|
<label for="csvInput">Paste CSV Data:</label>
|
|
<textarea id="csvInput" class="form-control" rows="15" aria-label="CSV Input Area" placeholder="Paste your CSV data here to automatically view it as a table..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="delimiter">Delimiter:</label>
|
|
<select id="delimiter" class="form-control">
|
|
<option value="," selected>Comma (,)</option>
|
|
<option value=";">Semicolon (;)</option>
|
|
<option value="\t">Tab</option>
|
|
<option value="|">Pipe (|)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="hasHeader">First row is header:</label>
|
|
<input type="checkbox" id="hasHeader" checked>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tool-output" id="output">
|
|
<h2>Output</h2>
|
|
<p class="alert alert-info">Paste CSV data above to view it as a table.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h2>About This Tool</h2>
|
|
<p>This CSV Viewer allows you to:</p>
|
|
<ul>
|
|
<li>Paste and preview CSV data directly in your browser</li>
|
|
<li>Automatically view your data in a table format</li>
|
|
<li>Sort columns by clicking on column headers</li>
|
|
</ul>
|
|
<p>The tool processes everything in your browser - no data is sent to any server.</p>
|
|
</div>
|
|
|
|
<!-- Footer Include -->
|
|
<div id="footer-include"></div>
|
|
|
|
<!-- Load PapaParse first (local version) -->
|
|
<script src="../papaparse.min.js" integrity="sha256-Ue6wom48SQbpmwW9QIk7pyVDR5Bg36SetP67V2pDkxc="></script>
|
|
<!-- Then load our script -->
|
|
<script src="csv-tool.js?v=3" integrity="sha256-oRCvBUmDTuPb8XOF1vLYwhIrcj2kzMbEwX5QzUPAPQI="></script>
|
|
</body>
|
|
</html>
|