ablwr/bwf2.0

## bwf2.0
<!DOCTYPE html>
<html>
<head>
	<title>BWF MetaEdit display</title>
	<style>
		body {
			margin: 0;
	    padding: 0;
			font-family: sans-serif;
			width: 100%;
		}
		h4 {
			padding: 0;
			margin: 0;
		}
		.file {
			display: grid;
		}
		.top {
			display: grid;
			grid-auto-flow: row;
			grid-template-columns: auto 13em;
			align-items: end;
		}
		.expandStatus, .saveStatus {
			font-size: 2em;
			width: 3em;
			float: right;
		}
		.core, .bext, .info {
			display: flex;
			flex-flow: row wrap;
		}
		input {
			margin-left: 3px;
			margin-right: 9px;
		}
	</style>
</head>
<body>
	<div id="file1" class="file">
		<div class="top">
			<div class="filepath">/home/ashley/path/path/path/path/path/another-path/path/to/a/file-with-some-metadata-in-it.wav</div>
			<div class="actions">
				<button class="saveStatus">✔</button>
				<button class="expandStatus">➖</button>
			</div>
			<div class="technicalData">
				<!-- <div>{Filesize (human-readable)} {Format} {CodecID}, {Duration},{Channels} Channels {SampleRate} {BitRate} {BitsPerSample}</div> -->
				<div>32 MiB Wave 0003, 00:02:57.000, 2 Channels, 44.1 kHz, 128 Kbps, 16 bit</div>
			</div>
				<div>
					<button>XMP</button>
					<button>aXML</button>
					<button>iXML</button>
				</div>
			<div class="importantInfo">
				<!-- Show these if there is anything to show -->
				<!-- 	<div>Errors</div>
				<div>Information</div>
				<div>UnsupportedChunks</div> -->
			</div>
		</div>
			<!-- Show these only if options is on -->
			<!-- <div>MD5Stored</div> -->
			<!-- <div>MD5Generated</div> -->
			<h4>CORE</h4>
			<div class="core">
				<div>LoudnessValue <input type="text" size="2"></input></div>
				<div>LoudnessRange <input type="text" size="2"></input></div>
				<div>MaxTruePeakLevel <input type="text" size="2"></input></div>
				<div>MaxMomentaryLoudness <input type="text" size="2"></input></div>
				<div>MaxShortTermLoudness <input type="text" size="2"></input></div>
				<div>CodingHistory <input type="text" size="2"></input></div>
			</div>
		<h4>BEXT</h4>
		<div class="bext">
			<div>Version #<input type="text" size="1"></input></div>
			<div>Description <input type="text" size="10"></input></div>
			<div>Originator <input type="text" size="10"></input></div>
			<div>OriginatorReference <input type="text" size="10"></input></div>
			<div>OriginationDate <input type="text" size="8"></input></div>
			<div>OriginationTime <input type="text" size="8"></input></div>
			<div>TimeReference <input type="text" size="8"></input> (HH:MM:SS.mmm)</div>
		</div>
		<div class="umid">
			<!-- only show if BEXT Version 1 -->
			<!-- <div>UMID <input type="text" size="32"></input></div> -->
		</div>
		<h4>INFO</h4>
		<div class="info">
			<div> Archival Location (IARL) <input type="text" size="10"></input></div>
			<div> Artist (IART) <input type="text" size="10"></input></div>
			<div> Commissioned (ICMS) <input type="text" size="10"></input></div>
			<div> Comments (ICMT) <input type="text" size="10"></input></div>
			<div> Copyright (ICOP) <input type="text" size="10"></input></div>
			<div> Creation date (ICRD) <input type="text" size="10"></input></div>
			<div> Engineer (IENG) <input type="text" size="10"></input></div>
			<div> Genre (IGNR) <input type="text" size="10"></input></div>
			<div> Keywords (IKEY) <input type="text" size="10"></input></div>
			<div> Medium (IMED) <input type="text" size="10"></input></div>
			<div> Name (Title) (INAM) <input type="text" size="10"></input></div>
			<div> Product (Album) (IPRD) <input type="text" size="10"></input></div>
			<div> Subject (ISBJ) <input type="text" size="10"></input></div>
			<div> Software (ISFT) <input type="text" size="10"></input></div>
			<div> Source (ISRC) <input type="text" size="10"></input></div>
			<div> Source Form (ISRF) <input type="text" size="10"></input></div>
			<div> Technician (ITCH) <input type="text" size="10"></input></div>
		</div>

	</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>BWF MetaEdit display</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	width: 100%;
	}
	h4 {
	padding: 0;
	margin: 0;
	}
	.file {
	display: grid;
	}
	.top {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: auto 13em;
	align-items: end;
	}
	.expandStatus, .saveStatus {
	font-size: 2em;
	width: 3em;
	float: right;
	}
	.core, .bext, .info {
	display: flex;
	flex-flow: row wrap;
	}
	input {
	margin-left: 3px;
	margin-right: 9px;
	}
	</style>
	</head>
	<body>
	<div id="file1" class="file">
	<div class="top">
	<div class="filepath">/home/ashley/path/path/path/path/path/another-path/path/to/a/file-with-some-metadata-in-it.wav</div>
	<div class="actions">
	<button class="saveStatus">✔</button>
	<button class="expandStatus">➖</button>
	</div>
	<div class="technicalData">
	<!-- <div>{Filesize (human-readable)} {Format} {CodecID}, {Duration},{Channels} Channels {SampleRate} {BitRate} {BitsPerSample}</div> -->
	<div>32 MiB Wave 0003, 00:02:57.000, 2 Channels, 44.1 kHz, 128 Kbps, 16 bit</div>
	</div>
	<div>
	<button>XMP</button>
	<button>aXML</button>
	<button>iXML</button>
	</div>
	<div class="importantInfo">
	<!-- Show these if there is anything to show -->
	<!-- <div>Errors</div>
	<div>Information</div>
	<div>UnsupportedChunks</div> -->
	</div>
	</div>
	<!-- Show these only if options is on -->
	<!-- <div>MD5Stored</div> -->
	<!-- <div>MD5Generated</div> -->
	<h4>CORE</h4>
	<div class="core">
	<div>LoudnessValue <input type="text" size="2"></input></div>
	<div>LoudnessRange <input type="text" size="2"></input></div>
	<div>MaxTruePeakLevel <input type="text" size="2"></input></div>
	<div>MaxMomentaryLoudness <input type="text" size="2"></input></div>
	<div>MaxShortTermLoudness <input type="text" size="2"></input></div>
	<div>CodingHistory <input type="text" size="2"></input></div>
	</div>
	<h4>BEXT</h4>
	<div class="bext">
	<div>Version #<input type="text" size="1"></input></div>
	<div>Description <input type="text" size="10"></input></div>
	<div>Originator <input type="text" size="10"></input></div>
	<div>OriginatorReference <input type="text" size="10"></input></div>
	<div>OriginationDate <input type="text" size="8"></input></div>
	<div>OriginationTime <input type="text" size="8"></input></div>
	<div>TimeReference <input type="text" size="8"></input> (HH:MM:SS.mmm)</div>
	</div>
	<div class="umid">
	<!-- only show if BEXT Version 1 -->
	<!-- <div>UMID <input type="text" size="32"></input></div> -->
	</div>
	<h4>INFO</h4>
	<div class="info">
	<div> Archival Location (IARL) <input type="text" size="10"></input></div>
	<div> Artist (IART) <input type="text" size="10"></input></div>
	<div> Commissioned (ICMS) <input type="text" size="10"></input></div>
	<div> Comments (ICMT) <input type="text" size="10"></input></div>
	<div> Copyright (ICOP) <input type="text" size="10"></input></div>
	<div> Creation date (ICRD) <input type="text" size="10"></input></div>
	<div> Engineer (IENG) <input type="text" size="10"></input></div>
	<div> Genre (IGNR) <input type="text" size="10"></input></div>
	<div> Keywords (IKEY) <input type="text" size="10"></input></div>
	<div> Medium (IMED) <input type="text" size="10"></input></div>
	<div> Name (Title) (INAM) <input type="text" size="10"></input></div>
	<div> Product (Album) (IPRD) <input type="text" size="10"></input></div>
	<div> Subject (ISBJ) <input type="text" size="10"></input></div>
	<div> Software (ISFT) <input type="text" size="10"></input></div>
	<div> Source (ISRC) <input type="text" size="10"></input></div>
	<div> Source Form (ISRF) <input type="text" size="10"></input></div>
	<div> Technician (ITCH) <input type="text" size="10"></input></div>
	</div>

	</div>
	</body>
	</html>