tpatel · April 15, 2017 19:04
diff --git a/mentions.html b/mentions.html
 <!DOCTYPE>
 <html>
 <head>
 	<meta name="charset" content="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title></title>
 	<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css" rel="stylesheet" type="text/css">
 	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css">
 	<style>
 		html {
 			color: #111111;
 			background-color: #F7F7F7;
 		}
 		body {
 			width: 960px;
 			margin: 0 auto;
 			font-family: 'Open Sans', sans-serif;
 			font-size: 1.2em;
 			line-height: 2em;
 		}
 		h1 {
 			color: #8c3131;
 		}
 		header, main, footer {
 			padding: 1em 0;
 		}
 		input {
 			width: 100%;
 			padding: 10px 0;
 		}
 		footer {
 			font-size: 0.9em;
 			color: #3f3f3f;
 		}
 	</style>
 </head>
 <body>
 	<header>
 		<h1>Internet mentions</h1>
 		<p>Enter the brand you want to monitor, we'll give you Google search results sorted according to the indexation date.</p>
 	</header>

 	<main>
 		
 		<label>The brand you want to monitor (using the Google search syntax) <input type="text" id="input" value="nomadlist"/></label>
 		<p>Result: <a href="" id="output" target="_blank"></a></p>
 	</main>

 	<footer>Made by <a href="http://twitter.com/thibpat">@thibpat</a>. Coded on the 14th of April for <a href="http://twitter.com/levelsio">@levelsio</a>'s birthday.</footer>

 	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 	<script>
 function update() {
 	var input = $('#input').val().replace(/^\s+|\s+$/g, '');
 	location.hash = input;
 	if(input) {
 		var res = 'https://www.google.com/search?tbs=qdr:w,sbd:1&q=' + encodeURIComponent(input);
 		$('#output').text(res);
 		$('#output').attr('href', res);
 	} else {
 		$('#output').text('Please enter a brand in the input field');
 	}
 }
 $('#input').on('keyup', update);

 var hash = decodeURIComponent(location.hash.replace(/^#/, ''));
 if(hash) {
 	$('#input').val(hash);
 }

 update();
 	</script>
 </body>
 </html>
	<!DOCTYPE>
	<html>
	<head>
	<meta name="charset" content="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css" rel="stylesheet" type="text/css">
	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css">
	<style>
	html {
	color: #111111;
	background-color: #F7F7F7;
	}
	body {
	width: 960px;
	margin: 0 auto;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2em;
	line-height: 2em;
	}
	h1 {
	color: #8c3131;
	}
	header, main, footer {
	padding: 1em 0;
	}
	input {
	width: 100%;
	padding: 10px 0;
	}
	footer {
	font-size: 0.9em;
	color: #3f3f3f;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Internet mentions</h1>
	<p>Enter the brand you want to monitor, we'll give you Google search results sorted according to the indexation date.</p>
	</header>

	<main>

	<label>The brand you want to monitor (using the Google search syntax) <input type="text" id="input" value="nomadlist"/></label>
	<p>Result: <a href="" id="output" target="_blank"></a></p>
	</main>

	<footer>Made by <a href="http://twitter.com/thibpat">@thibpat</a>. Coded on the 14th of April for <a href="http://twitter.com/levelsio">@levelsio</a>'s birthday.</footer>

	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
	function update() {
	var input = $('#input').val().replace(/^\s+\|\s+$/g, '');
	location.hash = input;
	if(input) {
	var res = 'https://www.google.com/search?tbs=qdr:w,sbd:1&q=' + encodeURIComponent(input);
	$('#output').text(res);
	$('#output').attr('href', res);
	} else {
	$('#output').text('Please enter a brand in the input field');
	}
	}
	$('#input').on('keyup', update);

	var hash = decodeURIComponent(location.hash.replace(/^#/, ''));
	if(hash) {
	$('#input').val(hash);
	}

	update();
	</script>
	</body>
	</html>