Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Генератор Титулов</title>

	<style>
	body {
		margin: 0px;

		background: #6A7495;
		color: #C2C2DA;
		font-family: Verdana;
	}

	#preview {
		height: 160px;
		width: 160px;

		display: flex;
		justify-content: center; /* align horizontal */
		align-items: center; /* align vertical */
		text-align: center;
	}

	input[type=text] { text-align: center; }
	label {
		float: left;
		width: 5em;
		margin-right: 1em;
	}

	/* rows & cols */

	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}

	[class*="col-"] {
		float: left;
		padding: 15px;
	}

	.row::after {
		content: "";
		clear: both;
		display: block;
	}
	</style>
	<meta charset="utf-8">
</head>
<body>
	<div class="row">
		<div class="col-none" id="preview">
			<div>
				&laquo;<span id="content">Little Mouse</span>&raquo;
				<br />
				<img src="/s/tg/mices/1.png?v=3" data-mice-id="1" height="110" alt="" id="mice_example" />
			</div>
		</div>
		<div class="col-3">
			<form id="generator">
			<h2>Генератор Титулов</h2>
			<input type="radio" name="grtype" value="rgb"> RGB <input type="radio" name="grtype" value="hsv" checked> HSV <input type="radio" name="grtype" value="hsvi"> HSVi
			<br /><br />
			<label for="title">&nbsp;</label>
			<input type="text" id="title" name="title" value="Little Mouse" size="9">
			<br /><br />
			<label for="fade_start">Цвет #1</label>
			<input type="color" id="fade_start" name="fade_start" value="#E50600">
			<br />
			<label for="fade_end">Цвет #2</label>
			<input type="color" id="fade_end" name="fade_end" value="#00BABF">
			<br /><br />
			<input type="button" onclick="window.location.hash='t=hsv&v=Little%20Mouse&from=%23e50600&to=%2300babf'; load_params(); update_preview();" value="Сброс" />
			<textarea id="output_code" style="margin: 0px; width: 450px; height: 100px;"></textarea>
			</form>
		</div>
	</div>

	<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="/s/tg/tinycolor.js"></script>
	<script type="text/javascript" src="/s/tg/tinygradient.js"></script>
	<script type="text/javascript">
		$.unparam = function(a){if(""==a)return null;for(var b={},c=a.split("&"),d=0;d<c.length;d++){var e=c[d].split("="),f=decodeURIComponent(e[0]),g=decodeURIComponent(e[1]);"undefined"==typeof b[f]?"[]"!=f.substr(f.length-2)?b[f]=g:b[f.substr(0,f.length-2)]=[g]:"string"==typeof b[f]?b[f]=g:b[f.substr(0,f.length-2)].push(g)}return b}
	</script>
	<script type="text/javascript">
		var title_input = $("input[name=\"title\"]");
		var title_preview = $("#preview span#content");

		function load_params() {
			var gradient_info = $.unparam(window.location.hash.substr(1));
			if (gradient_info != null) {
				$("input[name='grtype'][value='" + gradient_info.t + "']").prop("checked", true);
				$("input[name='title']").val(gradient_info.v);
				$("input[name='fade_start']").val(gradient_info.from);
				$("input[name='fade_end']").val(gradient_info.to);
			}
		}

		function update_preview() {
			var title_raw = title_input.val().length > 0 ? title_input.val() : "Little Mouse";
			var title_html = "";
			var twlength = title_raw.trim(' ').length;

			if (twlength < 2) {title_preview.html(title_raw); return;}

			var gradient = tinygradient($("#fade_start").val(), $("#fade_end").val());
			var gr_type = $("input[name=\"grtype\"]:checked").val();
			var gr_done = gr_type == "rgb" ? gradient.rgb(twlength) : gradient.hsv(twlength, gr_type == "hsvi");

			for (var i = 0, s = 0, len = title_raw.length; i < len; i++) {
				if (title_raw.charAt(i) != " ") {
					var color = gr_done[i - s].toHexString();

					title_html += '<font color="' + color + '">' + title_raw.charAt(i) + '</font>';
				} else {
					s++;
					title_html += " ";
				}
			}

			title_preview.html(title_html);
			$("#output_code").val(title_html);
			window.location.hash = $.param({t: gr_type, v: title_raw, from: $("#fade_start").val(), to: $("#fade_end").val()})
		}

		$("form#generator > input").on('input', update_preview);
		$("form#generator > input[name=\"grtype\"]").on('change', update_preview);
		//$(window).on('hashchange', load_params);

		$(document).ready(function() {
			$("#preview").click(function() {
				var image = $("img#mice_example");
				image.data('miceId', (image.data('miceId') % 3) + 1);
				image.attr("src", "/s/tg/mices/" + image.data('miceId') + ".png?v=3");
			});
			load_params();
			update_preview();
		});
	</script>
</body>
</html>