114 lines
5.4 KiB
HTML
114 lines
5.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" integrity="sha256-Y+6RTuKMnPfNa1TjCQCcFhxwo0G+xNy7t1MaAvn5SuU=">
|
|
<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-q9ac7XWqnIASoBRfs4I4hpSMlnxGARofcEw0cSFfn/E="></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>
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'sha256-oRCvBUmDTuPb8XOF1vLYwhIrcj2kzMbEwX5QzUPAPQI=' 'sha256-Ue6wom48SQbpmwW9QIk7pyVDR5Bg36SetP67V2pDkxc=' 'sha256-uTJNJlctGr5GxR5DKnz1Ex31vH0TR93OFGloxbHe65g=' 'sha256-fOEWMJmrMxKbP5wElIXmDNUlfs6BSn+E9zt81T0Rysg=' 'sha256-q9ac7XWqnIASoBRfs4I4hpSMlnxGARofcEw0cSFfn/E=' 'sha256-+dDNTo7WAOmn2YC875+vn9oH4UkMwlVOGlARp2uq3A4=' 'sha256-1ZUvhca3M/N6hch4NrdPufDPLTnANOpJ4hfsZgRykgg=' 'sha256-UUDFHb6NI63nBRS2EmyJq4giwjTQGYPq7uSTB4UQnPc=' 'sha256-Ue6wom48SQbpmwW9QIk7pyVDR5Bg36SetP67V2pDkxc=' 'sha256-ryQsJ+aghKKD/CeXgx8jtsnZT3Epp3EjIw8RyHIq544=' 'sha256-8CNR2aPoRsO94LHwXXZzxijfMf15BfwUewt8hvVbPcE='; style-src 'self' 'sha256-5oTxos9Qxwhor3qIwHSM12YyIZi5E+tHuFdYER0hXoI=' 'sha256-807UZmWvd6eLc8xVckZkNX6CRP9WV8MzHURc5BgtRWo=' 'sha256-Y+6RTuKMnPfNa1TjCQCcFhxwo0G+xNy7t1MaAvn5SuU=' 'sha256-O+OMb48leSKvekhMTDUK1y6+WG9x33kA0eDw00wUwkY=' 'sha256-2EA12+9d+s6rrc0rkdIjfmjbh6p2o0ZSXs4wbZuk/tA='; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'none';">
|
|
<body>
|
|
<!-- Header Include -->
|
|
<div id="header-include"></div>
|
|
|
|
<div class="container-fluid" role="main">
|
|
<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">
|
|
<h3>Paste CSV Data</h3>
|
|
<div class="form-group full-width">
|
|
<textarea id="csvInput" class="form-control" rows="15" 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">
|
|
<h3>Output</h3>
|
|
<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>
|