Web hex dumper, with colors

## hexit.php
<?php
header('Content-Type: text/html; charset=utf-8');
define('POST_MAX_LENGTH', 4096);

if (!isset($_POST['txt'])) {
    $txt = "<?php\necho 'Hello World!';\n?>";
} elseif(strlen($_POST['txt']) > POST_MAX_LENGTH) {
	$txt = substr($_POST['txt'], 0, POST_MAX_LENGTH);
} else {
	$txt = $_POST['txt'];
}

$hex = array_map('strtoupper', array_map('dechex', range(0,15)));

?><!DOCTYPE html>
<html>
<head>
<title>Hex it!</title>
<style>
body,html				{margin:0;padding:0;background:#333;}
body,table				{font-family:"Consolas","Monaco","Courier New","Courier",monospace;font-size:14px;line-height:18px;width:100%}
body					{padding:50px 70px;width:570px}
tbody th				{padding-right:6px;}
thead th				{padding-bottom:1px;}
td						{padding:3px;color:#0c0;cursor:pointer;}
tr:hover td,tr:hover th {background:#2A2A2A;}
th,.hex					{text-align:right;color:#990;padding:3px;}
textarea,input			{border:1px solid #000;background:#222;color:#eaeaea;padding:6px;margin-bottom:8px;float:right;}
textarea				{display:block;width:100%;height:200px;padding:2px;}
a						{text-decoration:none;color:#990;}
.highlight				{background-color:#000 !important;}
.plain					{padding-left:20px;text-align:left;white-space:pre;color:#0cc;}
.plain b				{font-weight:normal;}
th.plain				{color:#990;}
a.empty					{color:#c30;}
.nonprintable			{color:#f3f;}
.normal					{color:#0c0;}
.whitespace				{color:#ccc;}
.danger					{color:#c30;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('#hex').on('click', 'b', function() {
		$('.highlight').removeClass('highlight');
		$(this).addClass('highlight').parent().parent().find('td').eq($(this).prevAll('b').length).addClass('highlight');
	});
	$('#hex').on('click', 'td:not(.plain)', function() {
		$('.highlight').removeClass('highlight');
		$(this).addClass('highlight').parent().find('td.plain b').eq($(this).prevAll('td').length).addClass('highlight');
	});
});
</script>
</head>
<body>
	<form method="post" action="">
		<textarea maxlength="<?=POST_MAX_LENGTH?>" name="txt"><?="\n".htmlspecialchars($txt)?></textarea>
		<span class="hex">Legend:&nbsp;</span>
		<span class="normal">&nbsp;normal&nbsp;</span>
		<span class="whitespace">&nbsp;whitespace&nbsp;</span>
		<span class="danger">&nbsp;high/low&nbsp;ascii&nbsp;</span>
		<input type="submit" value="Hex it!">
	</form>
	<table cellpadding="0" cellspacing="0" border="0" id="hex">
	<thead>
		<tr>
			<th>&nbsp;</th>
<?php foreach($hex as $i){ echo "\t\t\t<th>+{$i}</th>\n"; } ?>
			<th class="plain"><?=implode('',$hex)?></th>
		</tr>
	</thead>
	<tbody>
<?php
$offset = 0;
$strlen = strlen($txt);
while ($offset < $strlen && $line = substr($txt, $offset, 0x10)) {
	echo "\t\t<tr>\n\t\t\t<th>0x" . sprintf('%04X', $offset) . "</th>\n\t\t\t";
	$linelen = strlen($line);
	$offset += $linelen;
	$hexpart = '';
	$plainpart = '';
	for ($i = 0; $i < $linelen; $i++) {
		$class = '';
		$ascii = ord($line[$i]);
		if ($ascii < 0x20 || $ascii > 0x7F) {
			$char = '<b class="nonprintable">.</b>';
			if (!in_array($ascii, array(0x09, 0x0A, 0x0D))) {
				$class = ' class="danger"';
			} else {
				$class = ' class="whitespace"';
			}
		} else {
			if ($ascii == 0x20) {
				$class = ' class="whitespace"';
			}
			$char = '<b>'.htmlspecialchars($line[$i]).'</b>';
		}
		$hexpart .= "<td{$class}".($i==$linelen-1?((0x10-$linelen)?(' colspan="'.(0x11-$linelen).'"'):''):'').">".sprintf('%02X', $ascii)."</td>\n\t\t\t";
		$plainpart .= $char;
	}
	echo $hexpart . "<td class=\"plain\">" . $plainpart . "</td>\n\t\t</tr>\n";
}
?>
	</tbody>
	</table>
</body>
</html>
	<?php
	header('Content-Type: text/html; charset=utf-8');
	define('POST_MAX_LENGTH', 4096);

	if (!isset($_POST['txt'])) {
	$txt = "<?php\necho 'Hello World!';\n?>";
	} elseif(strlen($_POST['txt']) > POST_MAX_LENGTH) {
	$txt = substr($_POST['txt'], 0, POST_MAX_LENGTH);
	} else {
	$txt = $_POST['txt'];
	}

	$hex = array_map('strtoupper', array_map('dechex', range(0,15)));

	?><!DOCTYPE html>
	<html>
	<head>
	<title>Hex it!</title>
	<style>
	body,html {margin:0;padding:0;background:#333;}
	body,table {font-family:"Consolas","Monaco","Courier New","Courier",monospace;font-size:14px;line-height:18px;width:100%}
	body {padding:50px 70px;width:570px}
	tbody th {padding-right:6px;}
	thead th {padding-bottom:1px;}
	td {padding:3px;color:#0c0;cursor:pointer;}
	tr:hover td,tr:hover th {background:#2A2A2A;}
	th,.hex {text-align:right;color:#990;padding:3px;}
	textarea,input {border:1px solid #000;background:#222;color:#eaeaea;padding:6px;margin-bottom:8px;float:right;}
	textarea {display:block;width:100%;height:200px;padding:2px;}
	a {text-decoration:none;color:#990;}
	.highlight {background-color:#000 !important;}
	.plain {padding-left:20px;text-align:left;white-space:pre;color:#0cc;}
	.plain b {font-weight:normal;}
	th.plain {color:#990;}
	a.empty {color:#c30;}
	.nonprintable {color:#f3f;}
	.normal {color:#0c0;}
	.whitespace {color:#ccc;}
	.danger {color:#c30;}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script>
	$(document).ready(function() {
	$('#hex').on('click', 'b', function() {
	$('.highlight').removeClass('highlight');
	$(this).addClass('highlight').parent().parent().find('td').eq($(this).prevAll('b').length).addClass('highlight');
	});
	$('#hex').on('click', 'td:not(.plain)', function() {
	$('.highlight').removeClass('highlight');
	$(this).addClass('highlight').parent().find('td.plain b').eq($(this).prevAll('td').length).addClass('highlight');
	});
	});
	</script>
	</head>
	<body>
	<form method="post" action="">
	<textarea maxlength="<?=POST_MAX_LENGTH?>" name="txt"><?="\n".htmlspecialchars($txt)?></textarea>
	<span class="hex">Legend: </span>
	<span class="normal"> normal </span>
	<span class="whitespace"> whitespace </span>
	<span class="danger"> high/low ascii </span>
	<input type="submit" value="Hex it!">
	</form>
	<table cellpadding="0" cellspacing="0" border="0" id="hex">
	<thead>
	<tr>
	<th> </th>
	<?php foreach($hex as $i){ echo "\t\t\t<th>+{$i}</th>\n"; } ?>
	<th class="plain"><?=implode('',$hex)?></th>
	</tr>
	</thead>
	<tbody>
	<?php
	$offset = 0;
	$strlen = strlen($txt);
	while ($offset < $strlen && $line = substr($txt, $offset, 0x10)) {
	echo "\t\t<tr>\n\t\t\t<th>0x" . sprintf('%04X', $offset) . "</th>\n\t\t\t";
	$linelen = strlen($line);
	$offset += $linelen;
	$hexpart = '';
	$plainpart = '';
	for ($i = 0; $i < $linelen; $i++) {
	$class = '';
	$ascii = ord($line[$i]);
	if ($ascii < 0x20 \|\| $ascii > 0x7F) {
	$char = '<b class="nonprintable">.</b>';
	if (!in_array($ascii, array(0x09, 0x0A, 0x0D))) {
	$class = ' class="danger"';
	} else {
	$class = ' class="whitespace"';
	}
	} else {
	if ($ascii == 0x20) {
	$class = ' class="whitespace"';
	}
	$char = '<b>'.htmlspecialchars($line[$i]).'</b>';
	}
	$hexpart .= "<td{$class}".($i==$linelen-1?((0x10-$linelen)?(' colspan="'.(0x11-$linelen).'"'):''):'').">".sprintf('%02X', $ascii)."</td>\n\t\t\t";
	$plainpart .= $char;
	}
	echo $hexpart . "<td class=\"plain\">" . $plainpart . "</td>\n\t\t</tr>\n";
	}
	?>
	</tbody>
	</table>
	</body>
	</html>