icedraco/gyazo-image-extractor.html

## gyazo-image-extractor.html
<!DOCTYPE html>
<html>
<head>
<title>Gyazo Image Extractor</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var AUTOUPDATE_TIMEOUT = null;

function getImageUrl(input) {
	var result = "";
	if (input.length > 0) {
		var arr  = input.split("/");
		var code = arr[ arr.length - 1 ].trim();
		result = "http://i.gyazo.com/"+ code +".png";
	}

	return result;
}

function updateImage() {
	var url = getImageUrl($("#gurl")[0].value);
	$("#image").html(url.length == 0 ? "" : $("<img>").attr("src", url));
}

$(document).ready(function(){
	$("#btn_go").click(updateImage);
	$("#gurl").keyup(function(){
		clearTimeout(AUTOUPDATE_TIMEOUT);
		AUTOUPDATE_TIMEOUT = setTimeout(updateImage, 300);
	});
});
</script>

<style>
html, body {
	background: #000;
	color: #aaa;
	font-family: sans-serif;
	font-size: 12px;
}

input {
	background: #222;
	color: #09f;
	border: #666 1px solid;
	border-radius: 4px;
	padding: 4px;
	font-size: 10px;
	transition: all .2s ease-out;
}
input:hover {
	transition: all .2s ease-in;
	border: #999 1px solid;
}

#container {
	margin: auto;
	text-align: center;
}

#url_section {
	padding: 10px;
	margin-bottom: 20px;
}

#gurl {
	width: 400px;
}

#btn_go {
	width: 100px;
	background: #09f;
	border: #09f 1px solid;
	color: #000;
	text-transform: uppercase;
	font-weight: bold;
	transition: all .2s ease-out;
}

#btn_go:hover {
	transition: all .2s ease-in;
	background: #0af;
	border: #fff 1px solid;
	color: #fff;
	box-shadow: 0 0 5px #fff inset;
	cursor: pointer;
}
</style>
</head>
<body>
<div id="container">

<div id="url_section">
	<form>
		<label for="gurl">Gyazo URL:</label>
		<input type="text" name="gurl" id="gurl" value="" onClick="this.setSelectionRange(0, this.value.length)">
		<input type="button" id="btn_go" value="Fetch">
	</form>
</div>

<div id="image">
</div>

</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Gyazo Image Extractor</title>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script>
	var AUTOUPDATE_TIMEOUT = null;

	function getImageUrl(input) {
	var result = "";
	if (input.length > 0) {
	var arr = input.split("/");
	var code = arr[ arr.length - 1 ].trim();
	result = "http://i.gyazo.com/"+ code +".png";
	}

	return result;
	}

	function updateImage() {
	var url = getImageUrl($("#gurl")[0].value);
	$("#image").html(url.length == 0 ? "" : $("<img>").attr("src", url));
	}

	$(document).ready(function(){
	$("#btn_go").click(updateImage);
	$("#gurl").keyup(function(){
	clearTimeout(AUTOUPDATE_TIMEOUT);
	AUTOUPDATE_TIMEOUT = setTimeout(updateImage, 300);
	});
	});
	</script>

	<style>
	html, body {
	background: #000;
	color: #aaa;
	font-family: sans-serif;
	font-size: 12px;
	}

	input {
	background: #222;
	color: #09f;
	border: #666 1px solid;
	border-radius: 4px;
	padding: 4px;
	font-size: 10px;
	transition: all .2s ease-out;
	}
	input:hover {
	transition: all .2s ease-in;
	border: #999 1px solid;
	}

	#container {
	margin: auto;
	text-align: center;
	}

	#url_section {
	padding: 10px;
	margin-bottom: 20px;
	}

	#gurl {
	width: 400px;
	}

	#btn_go {
	width: 100px;
	background: #09f;
	border: #09f 1px solid;
	color: #000;
	text-transform: uppercase;
	font-weight: bold;
	transition: all .2s ease-out;
	}

	#btn_go:hover {
	transition: all .2s ease-in;
	background: #0af;
	border: #fff 1px solid;
	color: #fff;
	box-shadow: 0 0 5px #fff inset;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div id="container">

	<div id="url_section">
	<form>
	<label for="gurl">Gyazo URL:</label>
	<input type="text" name="gurl" id="gurl" value="" onClick="this.setSelectionRange(0, this.value.length)">
	<input type="button" id="btn_go" value="Fetch">
	</form>
	</div>

	<div id="image">
	</div>

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