---
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 %}