{% extends "layout.html" %}
{% block content %}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>


var r =  Math.floor(Math.random() * Math.floor(200));
var g =  Math.floor(Math.random() * Math.floor(200));
var b =  Math.floor(Math.random() * Math.floor(200));
document.body.style.backgroundColor = 'rgba('+r+','+g+','+b+',0.1)'

var source = new EventSource("/{{url_in}}");
source.onmessage = function(event) {
	$('.progress-bar').css('width', event.data+'%').attr('aria-valuenow', event.data);
	$('.progress-bar-label').text(event.data+'%');
	var alpha = 1-event.data/150
	document.body.style.backgroundColor = 'rgba('+r+','+g+','+b+',0.3)'.replace(/[^,]+(?=\))/, alpha)

	if(event.data == 100){
		window.location.replace("/{{url_out}}")
		source.close()
	}
}
</script>
<br>
<b> I am handling all your work while you are watching this progress bar ... </b>
<div id="progs" class="progress" style="width: 50%; margin: 50px;">
	<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
		<span class="progress-bar-label">0%</span>
	</div>
</div>

 
{% endblock %}