{% extends '../base.html' %}

{% block head %}
	{% with fontawesome=True leaflet=False plotly=False vue=False %}
		{{ block.super }}
	{% endwith %}
{% endblock %}

{% block extra-head %}
<!--  include the (few) css declarations here to avoid loading external css -->
<style type="text/css">
.home-title{
	font-size: 500%;
	text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
	margin-bottom: 0px;
	position: absolute;
	z-index: 10000;
	left: 50%;
	transform: translate(-50%, 0);
}
a.logo{
	margin: 2rem 1.5vmin 0px 1.5vmin;
	display: inline-block;
	overflow: hidden;
}
a.logo img{
	margin-left:0px;
	margin-top:0px;
	height:3.5vmin;
}
#page-content{
	margin: auto;  /* center horizontally */
	max-width: 50em;
	transition:visibility .1s ease;
	padding-top: 2rem;
	text-align: justify;
}
#page-header {
	transform:scaleY(1);
	transition: transform .1s ease;
	transform-origin: top;
}
#page-footer {
	transform-origin: bottom;
	background-image: linear-gradient(180deg, rgb(248, 249, 250, 0), rgba(248, 249, 250, 1));
}
</style>
{% endblock %}

{% block body %}
<div id='page-header' class='border-bottom py-4 d-flex flex-column bg-body' style="width:100%">
	<div class='d-flex flex-row position-relative align-items-baseline'>
		<a target="_blank" class='logo' href='https://www.epos-ip.org/'>
			<img src="{% static 'img/logos/EPOS_logo_small_591_0.png' %}" />
		</a>
		<a target="_blank" class='logo' href='http://www.efehr.org/'>
			<img src="{% static 'img/logos/efehr_fin@3x.png' %}" />
		</a>
		<a target="_blank" class='logo' href='https://www.gfz-potsdam.de/'>
			<img src="{% static 'img/logos/GFZ-CD_LogoCMYK_EN.png' %}" style="margin-right:-0.4rem;margin-left:-0.4rem;margin-top:-0.4rem;height:3.7rem;"/>
		</a>
		<h1 class='home-title text-center'>eGSIM</h1>
		<div style='flex:1 1 auto;'></div>
		<a target="_blank" class='logo' href='https://www.globalquakemodel.org/'>
			<img class='bigger' src="{% static 'img/logos/OQ-Logo-Standard-CS3-01_trans_scaled.png' %}" style="height:3.8rem;margin-right:-1.2rem;margin-top:-.3rem;"/>
		</a>
		<a target="_blank" class='logo' href='http://www.sera-eu.org/'>
			<img src="{% static 'img/logos/SERA_logo_scaled.png' %}" />
		</a>
	</div>
	<h5 class='p-0 mt-3 text-center' style="flex: 1 1 auto">
		a web service to explore, select and test Ground-Shaking Intensity Models
	</h5>
</div>
<div id="page-content" class="font-readable">
{% block page-content %}
{% endblock %}
</div>
<div id="page-footer" class="px-4 py-2 text-right position-fixed start-0 end-0 bottom-0 d-flex flex-row align-items-baseline">
	<span>v2.0</span>
	<div style="flex:1 1 auto"></div>
	{% if ref_and_license_url %}
	<a target='_bank' href="{{ ref_and_license_url }}">
		<img class='me-1' style='height:1.5rem' src="{% static 'img/logos/AGPLv3_Logo.svg' %}">
		<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="{% static 'img/logos/cc.svg' %}" />
		<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="{% static 'img/logos/by.svg' %}" />
	</a>
	{% endif %}
</div>
{% endblock %}

{% block after-body %}
<script>

// make header and footer slowly appear/disappear on scroll up/down:
(function(){
	const mTop = parseFloat(document.getElementById('page-header').offsetHeight);
	var prevScroll = window.scrollY || document.scrollTop;
	var curScroll;
	var header = document.getElementById('page-header');
	var footer = document.getElementById('page-footer');

	var scrolled = function() {
		var scale = 1;
		var currScroll = parseFloat(window.scrollY || document.scrollTop);
		if (isNaN(currScroll)){ currScroll = 0; }
		console.log(currScroll);
		if (currScroll > 0){
			scale = (mTop - currScroll) / mTop;
			if (scale <= 0){ scale = 0; }
		}
		header.style.transform = `scaleY(${scale})`;
		footer.style.transform = `scaleY(${scale})`;
	};
	window.addEventListener('scroll', scrolled);

})();

// Make all external anchor tags open in a new frame
document.querySelectorAll("a").forEach(elm => {
    if ((elm.getAttribute('href') || '').startsWith('http')){
        elm.setAttribute("target", "_blank");
    }
});

</script>
{% endblock %}

{% block after-body2 %}


{% endblock %}