---
title: Introduction
tags:
  - demoIndex
---
{% set pageBase = "../" %}
{% set pageId = "intro" %}

{% extends "demo/_main.njk" %}

{% block title %}Einführung{% endblock %}
{% block head %}
	{{ super() }}
{% endblock %}

{% block main %}
	<!-- {{ page.fileSlug }}.page -->
	{% include "hippie/partials/_body_nav.njk" %}

	<section class="sec_main_center">
		<header>
			<hgroup>
				<h1>Introduction to HIPPIE</h1>
				<p>Hippie interweaves preeminent personal interface elements.</p>
			</hgroup>
		</header>
		<article>
			<p>&hellip;</p>
			<p>Contact: <a id="special" href=""></a>
			</p>
			<p>More: <a class="general" href=""></a>, <a class="general" href=""></a>
			</p>
		</article>
	</section>
{% endblock %}

{% block script %}
	{{ super() }}
	<script>
		assetsLoaded = true;
		logPerf('Assets loaded.', assetsLoaded);
		// Page specific
		// ------------------------------------------------------------------------------
		// Create instance of object made by contructor function
		var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
		var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));

		$(document).ready(function () {
			logPerf('JQ document ready event fired.');
			composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
			composeMail('.general', 'name', 'domain', 'tld', '', '')
		});

		$(document).scroll(function () {
			scrollUi.check();
		});
		logPerf('Application ready... not.');
	</script>
{% endblock %}