<commit_before><!DOCTYPE html>
<html>
	<head>
		<title>multiple countdown timer</title>
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
		<style>
		
		body {
			background: #333;
			font-family: Helvetica, Arial, sans-serif;
			font-size: 18px;
			margin: 0;
			padding: 0;
		}
		
		input, button {
			font-family: Helvetica, Arial, sans-serif;
			font-size: 18px;
		}
		
		#dashboard {
			background: #eee;
			margin: 1em auto;
			text-align: center;
			padding: 1em;
			width: 14em;
		}
		
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		
		li {
			margin: 0.5em;
		}
		
		input[type=number] {
			border: 1px solid gray;
			text-align: right;
			margin-left: 1em;
			width: 3em;
		}
		
		p {
			margin: 1em 0;
		}
		
		.note {
			color: gray;
			font-style: italic;
			font-size: smaller;
		}
		
		p.instructions {
			font-weight: bold;
			margin: 0;
		}
		
		#startButton {
			margin: 0.5em 0 2em 0;
		}
		
		/* http://www.bestcssbuttongenerator.com/ */
		.main-button {
			-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
			-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
			box-shadow:inset 0px 1px 0px 0px #54a3f7;
			background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
			background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
			background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
			background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
			background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
			background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
			background-color:#007dc1;
			-moz-border-radius:3px;
			-webkit-border-radius:3px;
			border-radius:3px;
			border:1px solid #124d77;
			display:inline-block;
			cursor:pointer;
			color:#ffffff;
			padding:6px 24px;
			text-decoration:none;
			text-shadow:0px 1px 0px #154682;
		}
		.main-button:hover {
			background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
			background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
			background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
			background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
			background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
			background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
			background-color:#0061a7;
		}
		.main-button:active {
			position:relative;
			top:1px;
		}

		.main-button:disabled {
			-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
			-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
			box-shadow:inset 0px 1px 0px 0px #ffffff;
			background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
			background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
			background-color:#f9f9f9;
			border:1px solid #dcdcdc;
			display:inline-block;
			color:#666666;
			text-shadow:0px 1px 0px #ffffff;
		}
		.main-button:hover:disabled {
			background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
			background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
			background-color:#f9f9f9;
		}
		
		.fa {
			min-width: 1em;
		}
		
		.fa-cog {
			color: #00c;
		}
		
		.fa-check {
			color: #0a0;
		}
		
		.fa-exclamation {
			color: #c00;
		}

		</style>
	</head>
	<body>
		<div id=dashboard>
			<p class="note instructions">Times in seconds</p>
			<ul id=timeList>
				<li>
					<input name=time type=number min=1 step=1 onkeypress="addIfNeeded();"/> <i class="fa"></i>
				</li>
				<li>
					<input name=time type=number min=1 step=1 onkeypress="addIfNeeded();"/> <i class="fa"></i>
				</li>
				<li>
					<input name=time type=number min=1 step=1 onkeypress="addIfNeeded();"/> <i class="fa"></i>
				</li>
			</ul>
			
			<button onclick="start();" id="startButton" class=main-button>Start</button>
			
			<p class=note>Send feedback to <a href="mailto:<EMAIL>"><EMAIL></a></p>
			
			<p class=note>Get the code at <a href="https://github.com/diogoko/multitimer/">github.com/diogoko/multitimer</a></p>
		</div>
		
		<audio id=startSound src="20440_agfx_beep-pager.mp3" preload=auto/>
		
		<!-- https://www.freesound.org/people/AGFX/sounds/20440/ -->
		<audio id=intermediateSound src="20440_agfx_beep-pager.mp3" preload=auto/>
		
		<!-- https://www.freesound.org/people/fins/sounds/133284/ -->
		<audio id=endSound src="133284_fins_level-completed.mp3" preload=auto/>
		
		<script src="zepto.min.js"></script>
		
		<script>
		
		RUNNING_CLASS = "fa-cog";
		DONE_CLASS = "fa-check";
		ERROR_CLASS = "fa-exclamation";
		
		function addIfNeeded() {
			var emptyCount = 0;
			var times = $("#timeList input");
			for (var i = times.length - 1; i > 0; i--) {
				if (times.get(i).value == "") {
					emptyCount++;
				} else {
					break;
				}
			}
			
			if (emptyCount < 1) {
				add();
			}
		}
		
		function add() {
			$("#timeList").append("<li><input name=time type=number min=1 step=1 onkeypress='addIfNeeded();'/> <i class='fa'></i></li>");
		}
		
		var times = [];
		var timesPositions = [];
		var timer = null;
		
		function parseTimes() {
			times = [];
			var position = 0;
			$("#timeList input").each(function() {
				var time = parseInt(this.value);
				if (!isNaN(time) && time > 0) {
					times.push(time);
					timesPositions.push(position);
				} else {
					if (this.value) {
						$(this).next("i").addClass(ERROR_CLASS);
					}
				}
				
				position++;
			});
		}
		
		function play(name) {
			$("#" + name + "Sound").get(0).play();
		}
		
		function start() {
			clearIndicators();
			
			parseTimes();
			if (times.length == 0) {
				return;
			}
			
			disableAll();
			setRunningIndicator();
			play("start");
			times[0]--;
			timer = setInterval(tick, 1000);
		}

		function tick() {
			var time = times[0];
			if (time == 0) {
				times.shift();
				
				setDoneIndicator();
				timesPositions.shift();
				
				if (times.length == 0) {
					clearInterval(timer);
					enableAll();
					play("end");
				} else {
					setRunningIndicator();
					play("intermediate");
					times[0]--;
				}
			} else {
				times[0]--;
				setRunningIndicator();
			}
		}
		
		function disableAll() {
			$("#startButton").prop("disabled", true);
			$("#timeList input").prop("disabled", true);
		}
		
		function enableAll() {
			$("#startButton").prop("disabled", false);
			$("#timeList input").prop("disabled", false);
		}
		
		function clearIndicators() {
			$("#timeList .fa").removeClass([RUNNING_CLASS, DONE_CLASS, ERROR_CLASS].join(" "));
		}
		
		function setRunningIndicator() {
			$("#timeList .fa").eq(timesPositions[0]).addClass(RUNNING_CLASS);
		}
		
		function setDoneIndicator() {
			$("#timeList .fa").eq(timesPositions[0]).removeClass(RUNNING_CLASS).addClass(DONE_CLASS);
		}
		
		</script>
	</body>
</html>
<commit_msg>Using clock icon instead of cog icon.<commit_after><!DOCTYPE html>
<html>
	<head>
		<title>multiple countdown timer</title>
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
		<style>
		
		body {
			background: #333;
			font-family: Helvetica, Arial, sans-serif;
			font-size: 18px;
			margin: 0;
			padding: 0;
		}
		
		input, button {
			font-family: Helvetica, Arial, sans-serif;
			font-size: 18px;
		}
		
		#dashboard {
			background: #eee;
			margin: 1em auto;
			text-align: center;
			padding: 1em;
			width: 14em;
		}
		
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		
		li {
			margin: 0.5em;
		}
		
		input[type=number] {
			border: 1px solid gray;
			text-align: right;
			margin-left: 1em;
			width: 3em;
		}
		
		p {
			margin: 1em 0;
		}
		
		.note {
			color: gray;
			font-style: italic;
			font-size: smaller;
		}
		
		p.instructions {
			font-weight: bold;
			margin: 0;
		}
		
		#startButton {
			margin: 0.5em 0 2em 0;
		}
		
		/* http://www.bestcssbuttongenerator.com/ */
		.main-button {
			-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
			-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
			box-shadow:inset 0px 1px 0px 0px #54a3f7;
			background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
			background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
			background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
			background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
			background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
			background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
			background-color:#007dc1;
			-moz-border-radius:3px;
			-webkit-border-radius:3px;
			border-radius:3px;
			border:1px solid #124d77;
			display:inline-block;
			cursor:pointer;
			color:#ffffff;
			padding:6px 24px;
			text-decoration:none;
			text-shadow:0px 1px 0px #154682;
		}
		.main-button:hover {
			background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
			background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
			background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
			background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
			background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
			background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
			background-color:#0061a7;
		}
		.main-button:active {
			position:relative;
			top:1px;
		}

		.main-button:disabled {
			-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
			-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
			box-shadow:inset 0px 1px 0px 0px #ffffff;
			background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
			background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
			background-color:#f9f9f9;
			border:1px solid #dcdcdc;
			display:inline-block;
			color:#666666;
			text-shadow:0px 1px 0px #ffffff;
		}
		.main-button:hover:disabled {
			background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
			background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
			background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
			background-color:#f9f9f9;
		}
		
		.fa {
			min-width: 1em;
		}
		
		.fa-clock-o {
			color: #00c;
		}
		
		.fa-check {
			color: #0a0;
		}
		
		.fa-exclamation {
			color: #c00;
		}

		</style>
	</head>
	<body>
		<div id=dashboard>
			<p class="note instructions">Times in seconds</p>
			<ul id=timeList>
				<li>
					<input name=time type=number min=1 step=1 onkeypress="addIfNeeded();"/> <i class="fa"></i>
				</li>
				<li>
					<input name=time type=number min=1 step=1 onkeypress="addIfNeeded();"/> <i class="fa"></i>
				</li>
				<li>
					<input name=time type=number min=1 step=1 onkeypress="addIfNeeded();"/> <i class="fa"></i>
				</li>
			</ul>
			
			<button onclick="start();" id="startButton" class=main-button>Start</button>
			
			<p class=note>Send feedback to <a href="mailto:<EMAIL>"><EMAIL></a></p>
			
			<p class=note>Get the code at <a href="https://github.com/diogoko/multitimer/">github.com/diogoko/multitimer</a></p>
		</div>
		
		<audio id=startSound src="20440_agfx_beep-pager.mp3" preload=auto/>
		
		<!-- https://www.freesound.org/people/AGFX/sounds/20440/ -->
		<audio id=intermediateSound src="20440_agfx_beep-pager.mp3" preload=auto/>
		
		<!-- https://www.freesound.org/people/fins/sounds/133284/ -->
		<audio id=endSound src="133284_fins_level-completed.mp3" preload=auto/>
		
		<script src="zepto.min.js"></script>
		
		<script>
		
		RUNNING_CLASS = "fa-clock-o";
		DONE_CLASS = "fa-check";
		ERROR_CLASS = "fa-exclamation";
		
		function addIfNeeded() {
			var emptyCount = 0;
			var times = $("#timeList input");
			for (var i = times.length - 1; i > 0; i--) {
				if (times.get(i).value == "") {
					emptyCount++;
				} else {
					break;
				}
			}
			
			if (emptyCount < 1) {
				add();
			}
		}
		
		function add() {
			$("#timeList").append("<li><input name=time type=number min=1 step=1 onkeypress='addIfNeeded();'/> <i class='fa'></i></li>");
		}
		
		var times = [];
		var timesPositions = [];
		var timer = null;
		
		function parseTimes() {
			times = [];
			var position = 0;
			$("#timeList input").each(function() {
				var time = parseInt(this.value);
				if (!isNaN(time) && time > 0) {
					times.push(time);
					timesPositions.push(position);
				} else {
					if (this.value) {
						$(this).next("i").addClass(ERROR_CLASS);
					}
				}
				
				position++;
			});
		}
		
		function play(name) {
			$("#" + name + "Sound").get(0).play();
		}
		
		function start() {
			clearIndicators();
			
			parseTimes();
			if (times.length == 0) {
				return;
			}
			
			disableAll();
			setRunningIndicator();
			play("start");
			times[0]--;
			timer = setInterval(tick, 1000);
		}

		function tick() {
			var time = times[0];
			if (time == 0) {
				times.shift();
				
				setDoneIndicator();
				timesPositions.shift();
				
				if (times.length == 0) {
					clearInterval(timer);
					enableAll();
					play("end");
				} else {
					setRunningIndicator();
					play("intermediate");
					times[0]--;
				}
			} else {
				times[0]--;
				setRunningIndicator();
			}
		}
		
		function disableAll() {
			$("#startButton").prop("disabled", true);
			$("#timeList input").prop("disabled", true);
		}
		
		function enableAll() {
			$("#startButton").prop("disabled", false);
			$("#timeList input").prop("disabled", false);
		}
		
		function clearIndicators() {
			$("#timeList .fa").removeClass([RUNNING_CLASS, DONE_CLASS, ERROR_CLASS].join(" "));
		}
		
		function setRunningIndicator() {
			$("#timeList .fa").eq(timesPositions[0]).addClass(RUNNING_CLASS);
		}
		
		function setDoneIndicator() {
			$("#timeList .fa").eq(timesPositions[0]).removeClass(RUNNING_CLASS).addClass(DONE_CLASS);
		}
		
		</script>
	</body>
</html>

{'fraction_non_alphanumeric': 0.1773582523045839, 'fraction_numerical': 0.061750220987498425, 'mean_word_length': 3.3851052048726467, 'pattern_counts': {'":': 0, '<': 123, '<?xml version=': 0, '>': 125, 'https://': 6, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5647741', 'n_tokens_mistral': 7850, 'n_tokens_neox': 6025, 'n_words': 1092}