CACKey: pin.html at [e53bb33148]

File build/chrome/pin.html artifact 40c7a5a8c8 part of check-in e53bb33148

<html>
	<head>
		<title>CACKey PIN Entry</title>
		<style>
			body {
				margin: 0px;
			}

			.pin-dialog {
				font-family: Roboto;
				width: 240px;
				background: white;
				margin: 20px;
			}

			.pin-body, .pin-heading {
				padding: 0px 16px;
			}

			.pin-heading h1 {
				font-size: 15px;
				font-weight: 500;
				padding-top: 18px;
				color: rgba(0, 0, 0, 0.87);
			}

			.pin-body {
				font-size: 13px;
				color: rgba(0, 0, 0, 0.54);
				line-height: 1.4;
				padding-top: 20px;
			}

			.pin-body input {
				width: 100%;
				padding: 5px;
				border-radius: 3px;
				border: 1px solid #cacaca;
				box-sizing: border-box;
			}

			.pin-buttons {
				text-align: right;
			}

			.pin-buttons button {
				margin: 12px 0px;
				height: 32px;
				padding: 0px 16px;
				background: none;
				border: none;
				cursor: pointer;
				font-size: 13px;
				text-transform: uppercase;
				color: #4285f4;
				font-weight: 500;
			}

			.pin-buttons button:hover, .pin-buttons button:focus {
				background-color: rgba(0, 0, 0, 0.08);
			}

			.pin-buttons button:active {
				background-color: rgba(0, 0, 0, 0.14);
			}

			.pin-buttons #ok {
				margin-left: 16px;
				margin-right: 8px;
			}

			.pin-buttons #cancel {
				margin-right: 16px;
			}
		</style>
		<script type="text/javascript" src="pin.js"></script>
	</head>
	<div class="pin-dialog">
		<div class="pin-heading">
			<h1 id="header">CACKey</h1>
		</div>

		<div class="pin-body">
			<form>
				<div>
					<label id="input-label" for="input"><div id="prompt">Enter Smart Card PIN</div></label>
				</div>
				<div>
					<input id="pin" type="password" autofocus/>
				</div>
				<div class="pin-buttons">
					<button id="ok" type="submit">OK</button>
					<button id="cancel" type="button">Cancel</button>
				</div>
			</form>
		</div>
	</div>
</html>