naufraghi · August 29, 2015 13:57
diff --git a/pasta.html b/pasta.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>Scola la pasta</title>
        <style type='text/css'>
            @import url(http://fonts.googleapis.com/css?family=Krona+One);
            h1 {
                font-family: 'Krona One', sans-serif;
                font-size: 8em;
                font-size: 8vm;
                font-size: 10vmin;
                text-align: center;
            }
        </style>
        <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.0/moment-with-langs.min.js"></script>
        <script type='text/javascript'>//<![CDATA[
            window.onload = function() {
                buttaLaPasta(window.location.pathname);
            }
            var intervalID = null;
            var timeoutID = null;
            function buttaLaPasta(time_string) {
                if (intervalID != null) {
                    clearInterval(intervalID);
                    clearTimeout(timeoutID);
                }
                window.history.pushState({}, document.title, time_string)
                var element_tempo_cottura = document.getElementById("tempo-cottura");

                var re = /\/?(\d*\.?\d+)\s*(\w+)/;
                var time = re.exec(time_string);

                moment.lang("it");

                function normalize(time_unit){
                    if ( time_unit[0] == "s" )
                        return "seconds";
                    if ( time_unit[0] == "m" )
                        return "minutes";
                    if ( time_unit[0] == "h" )
                        return "hours";
                    return time_unit;
                }

                var start_time = moment();
                var end_time = moment(start_time).add(normalize(time[2]), time[1]);
                var timeout = end_time.diff(start_time);
                var SECOND = 1000;
                var MINUTE = 60*SECOND;
                var HOUR = 60*MINUTE;

                function updateTimer(end_time){
                    var current_time = moment();
                    var countdown;
                    if ( end_time > current_time ) {
                        var elapsed = moment.duration(end_time - current_time);
                        countdown = ("0"+elapsed.minutes()).slice(-2)+":"+("0"+elapsed.seconds()).slice(-2);
                        if ( Math.abs(end_time - current_time) > HOUR ) {
                            countdown = elapsed.hours()+":"+countdown;
                        }
                    } else {
                        countdown = moment(end_time).fromNow();
                    }
                    element_tempo_cottura.innerHTML = countdown;
                }
                // go global
                timeoutID = setTimeout(function() {
                                document.getElementById('ring').play();
                                if ('vibrate' in navigator) {
                                    navigator.vibrate([1000, 500, 1000, 500, 1000]);
                                }
                            }, timeout);
                intervalID = setInterval(updateTimer, 1000, end_time);
            }//]]>
        </script>
    </head>
    <body>
        <audio id="ring" src="http://slug.it/test/alarm-clock-01.mp3" preload="auto"></audio>
        <audio id="tic-toc" src="http://slug.it/test/clock-ticking-2.mp3" preload="auto" autoplay loop></audio>

        <h1 id="tempo-cottura">0:00</h1>

        <form name="form_tempo" onsubmit="buttaLaPasta(document.form_tempo.tempo.value); return false">
            <label for="tempo">Tempo:</label>
            <input type="text" id="tempo" placeholder="10min" autofocus list="tempi" pattern="\d*\.?\d+\s*[hms].*">
            <datalist id="tempi">
                <option value="7min" />
                <option value="11min" />
                <option value="15min" />
                <option value="20min" />
                <option value="30min" />
                <option value="40min" />
            </datalist>
            <input type="submit" id="conta" value="Conta">
        </form>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Scola la pasta</title>
	<style type='text/css'>
	@import url(http://fonts.googleapis.com/css?family=Krona+One);
	h1 {
	font-family: 'Krona One', sans-serif;
	font-size: 8em;
	font-size: 8vm;
	font-size: 10vmin;
	text-align: center;
	}
	</style>
	<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.0/moment-with-langs.min.js"></script>
	<script type='text/javascript'>//<![CDATA[
	window.onload = function() {
	buttaLaPasta(window.location.pathname);
	}
	var intervalID = null;
	var timeoutID = null;
	function buttaLaPasta(time_string) {
	if (intervalID != null) {
	clearInterval(intervalID);
	clearTimeout(timeoutID);
	}
	window.history.pushState({}, document.title, time_string)
	var element_tempo_cottura = document.getElementById("tempo-cottura");

	var re = /\/?(\d\.?\d+)\s(\w+)/;
	var time = re.exec(time_string);

	moment.lang("it");

	function normalize(time_unit){
	if ( time_unit[0] == "s" )
	return "seconds";
	if ( time_unit[0] == "m" )
	return "minutes";
	if ( time_unit[0] == "h" )
	return "hours";
	return time_unit;
	}

	var start_time = moment();
	var end_time = moment(start_time).add(normalize(time[2]), time[1]);
	var timeout = end_time.diff(start_time);
	var SECOND = 1000;
	var MINUTE = 60*SECOND;
	var HOUR = 60*MINUTE;

	function updateTimer(end_time){
	var current_time = moment();
	var countdown;
	if ( end_time > current_time ) {
	var elapsed = moment.duration(end_time - current_time);
	countdown = ("0"+elapsed.minutes()).slice(-2)+":"+("0"+elapsed.seconds()).slice(-2);
	if ( Math.abs(end_time - current_time) > HOUR ) {
	countdown = elapsed.hours()+":"+countdown;
	}
	} else {
	countdown = moment(end_time).fromNow();
	}
	element_tempo_cottura.innerHTML = countdown;
	}
	// go global
	timeoutID = setTimeout(function() {
	document.getElementById('ring').play();
	if ('vibrate' in navigator) {
	navigator.vibrate([1000, 500, 1000, 500, 1000]);
	}
	}, timeout);
	intervalID = setInterval(updateTimer, 1000, end_time);
	}//]]>
	</script>
	</head>
	<body>
	<audio id="ring" src="http://slug.it/test/alarm-clock-01.mp3" preload="auto"></audio>
	<audio id="tic-toc" src="http://slug.it/test/clock-ticking-2.mp3" preload="auto" autoplay loop></audio>

	<h1 id="tempo-cottura">0:00</h1>

	<form name="form_tempo" onsubmit="buttaLaPasta(document.form_tempo.tempo.value); return false">
	<label for="tempo">Tempo:</label>
	<input type="text" id="tempo" placeholder="10min" autofocus list="tempi" pattern="\d\.?\d+\s[hms].*">
	<datalist id="tempi">
	<option value="7min" />
	<option value="11min" />
	<option value="15min" />
	<option value="20min" />
	<option value="30min" />
	<option value="40min" />
	</datalist>
	<input type="submit" id="conta" value="Conta">
	</form>
	</body>
	</html>