Select Git revision
-
Hans-Peter Deifel authoredHans-Peter Deifel authored
index.html 17.84 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow, archive">
<title>Journey - Erlangen 2017</title>
<!-- Bootstrap Core CSS -->
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom Theme CSS -->
<link href="node_modules/startbootstrap-grayscale/css/grayscale.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<!-- Fonts -->
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="node_modules/typeface-lora/index.css" rel="stylesheet" type="text/css">
<link href="node_modules/typeface-cabin/index.css" rel="stylesheet" type="text/css">
<!-- Map -->
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<meta name="description" content="Journey to the End of the Night Erlangen 2017">
<meta name="keywords" lang="en" content="journey, chase, night, 2017, Erlangen, Nürnberg, FAU, student">
<meta name="keywords" lang="de" content="journey, fangen, schnitzeljagd, nacht, 2017, Erlangen, Nürnberg, FAU, Student">
<meta name="geo.region" content="DE-BY">
<meta name="geo.placename" content="Erlangen, Michael-Vogel-Straße 1g">
<meta name="geo.position" content="49.5888644;11.0013673">
<meta name="icbm" content="49.5888644;11.0013673">
<!-- Facebook opengraph metadata -->
<meta property="og:description" content="Journey to the End of the Night Erlangen 2017">
<meta property="og:title" content="Journey - Erlangen 2017">
<meta property="og:url" content="https://journey.hawo.net/">
<!-- end opengraph -->
<!-- schema.org https://hallanalysis.com/json-ld-generator/ -->
<script type='application/ld+json'>
{
"@context": "http://www.schema.org",
"@type": "SportsEvent",
"name": "Journey to the End of the Night Erlangen 2017",
"url": "https://journey.hawo.net/",
"description": "Journey Erlangen is a race through the city's streets. You will run (or walk) from check point to check point to your final destination. But be careful! Avoid the chasers and don't get caught! If you do get caught - catch 'em yourself! Now your one of THEM.",
"startDate": "2017-07-14T19:13",
"endDate": "2017-07-15T01:00",
"location": {
"@type": "Place",
"name": "Omega",
"sameAs": "http://www.omega-erlangen.de/",
"address": {
"@type": "PostalAddress",
"streetAddress": "Michael-Vogel-Straße 1g",
"addressLocality": "Erlangen",
"addressRegion": "Bavaria",
"postalCode": "91058",
"addressCountry": "Germany"
}
},
"image": "http://journey.hawo.net/img/intro-bg.png" }
</script>
<!-- /schema.org -->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<nav id="mainNav" class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
Journey — Erlangen 2017
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="nav-item hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li class="nav-item">
<a class="page-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="#facts">Facts</a>
</li>
<li class="nav-item hidden-sm">
<a class="page-scroll" href="#rules">Rules</a>
</li>
<li class="nav-item hidden-sm hidden-md">
<a class="page-scroll" href="#contact">Participate</a>
</li>
<li class="nav-item">
<a href="https://www.facebook.com/events/1715901285116530/" style="color: #839CE6;">
<i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span>
</a>
</li>
<li class="nav-item">
<a href="https://play.google.com/store/apps/details?id=de.t_animal.journeyapp">
<img alt="Get it on Google Play" src="img/gplay.png"/>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<header class="intro" id="intro">
<div class="intro-bg" data-parallax-max="-60"></div>
<div class="intro-bg" data-parallax-max="-20"></div>
<div class="intro-bg" data-parallax-max="-75" data-rotate-max="10"></div>
<div class="intro-bg" data-parallax-max="40"></div>
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div data-parallax-max="50">
<h1><img class="img-responsive" src="img/journey.png" alt="Journey to the End of the Night" /></h1>
<p class="intro-text">Erlangen, July 14 2017, 7.13 pm.</p>
</div>
<a href="#" class="btn btn-circle page-scroll btn-next-section" onClick="playAndScroll();"></a>
</div>
</div> </div>
</div>
</header>
<section id="trailer" class="text-center">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="player1" class="embed-responsive-item" src="https://player.vimeo.com/video/92910983?portrait=0&color=f06000&api=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="container">
<div class="row">
<a href="#" class="btn btn-circle page-scroll btn-next-section" onClick="pauseAndScroll();"></a>
</div>
</div>
</section>
<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>The Journey</h2>
<p>
The city spreads out before you.
Rushing from point to point, lit by the slow strobe of fluorescent buses and dark streets.
Stumbling into situations for a stranger's signature.
Fleeing unknown pursuers, breathing hard, admiring the landscape and the multitude of worlds hidden in it.
</p>
<p>
For one night, drop your relations, your work and leisure activities,
and all your usual motives for movement and action,
and let yourself be drawn by the attractions of the chase and the encounters you find there.
</p>
<p>
Journey Erlangen is a race through the city's streets.
You will run (or walk) from check point to check point to your final destination.
But be careful! Avoid the chasers and don't get caught!
If you do get caught — catch 'em yourself! Now your one of THEM.
</p>
</div>
</div>
<div class="row">
<a href="#" class="btn btn-circle page-scroll btn-next-section"></a>
</div>
</section>
<section id="facts" class="content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>The Facts</h2>
<p>
<time datetime="2017-07-29T19:13"><strong>July 14 2017</strong></time> — mark the date!<br />
<strong>7.13 pm</strong> — be on time!<br />
<strong>Omega</strong> Michael-Vogel-Straße 1g, Erlangen<br />
</p>
<p>
Bring water and friends you can outrun
</p>
</div>
</div>
</div>
<div id="map"></div>
<div class="container">
<div class="row">
<a href="#" class="btn btn-circle page-scroll btn-next-section"></a>
</div>
</div>
</section>
<section id="rules" class="content-section text-center">
<div class="container">
<div class="row"> <div class="col-lg-8 col-lg-offset-2">
<h2>The Rules</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h4>Start as a runner</h4>
</div>
</div>
</div>
<div class="stickman-wrapper">
<img class="img-responsive img-stickman out center-block" src="img/runner.png">
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<ul class="text-left">
<li>Tie your <span class="label label-runner">runner ribbon</span> visibly around your arm, keep the <span class="label label-chaser">chaser ribbon</span> for later.</li>
<li>Start walking or running to the first checkpoint you can find on the map.</li>
<li>Cars, taxies, bikes or public transport are not allowed, only your own feet.</li>
</ul>
<br />
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h4>Evade the chasers</h4>
</div>
</div>
</div>
<div class="stickman-wrapper">
<img class="img-responsive img-stickman out center-block" src="img/chaser.png">
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<ul class="text-left">
<li>Players with a red ribbon will try to catch you.</li>
<li>If they succeed, give them your <span class="label label-runner">runner ribbon</span> and put on the <span class="label label-chaser">chaser ribbon</span>.</li>
<li>You become a chaser yourself and your new goal is to collect as many <span class="label label-runner">runner ribbons</span> as you can.</li>
<li>Some areas are marked on your map as safe zones, where capturing runners is not possible.</li>
</ul>
<br />
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h4>Run for your life</h4>
</div>
</div>
</div>
<div class="stickman-wrapper chasers-vs-runner">
<img class="img-responsive img-stickman out" src="img/chaser.png">
<img class="img-responsive img-stickman out" src="img/chaser.png">
<div class="space"></div>
<img class="img-responsive img-stickman out" src="img/runner.png">
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<p>
If you can make it, hit every checkpoint and arrive at the final destination.
</p>
<p>
<b>Don’t forget to have fun!</b>
</p>
</div> </div>
<div class="row">
<a href="#" class="btn btn-circle page-scroll btn-next-section"></a>
</div>
</div>
</section>
<section id="contact" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>Participate!</h2>
<p>No registration required</p>
<p>Questions? Drop us a mail!</p>
<p><a class="lead" href="#" data-hiddenml-1="jxiIGNsYXNzPSJoaWRlIj46IHNlbmQgbWUgYSBtYWlsPC9iPmhhPGk+PC9pPndvPGk+PC9pPjxzcGFuPi5uPC9zcGFuPjxpPjwvaT5ldDxzcGFuIGNsYXNzPSJoaWRlIj4udWs8L3NwYW4+PC9zcGFuPjxiPjwvYj48Yj48L2I+" data-hiddenml-z="4+PGI+PC9iPmpvdTxpPjwvaT48c3Bhbj5yPGk+PC9pPm48L3NwYW4+ZTxzcGFuPnk8L3NwYW4+PHNwYW4+PHNwYW4gY2xhc3M9ImhpZGUiPitpY2hiaW5zY2hsYXU8L3NwYW4+QDwvc3Bhbj48YSBocmVmPSJtYWlsdG86d2VibWFzdGVyQGdvb2dsZS5jb20iIGNsYXNzPSJtYWlsIGhpZGUiPndlYm1hc3RlckBnb29nbGUuY29tPC9hP"></a></p>
<p>Join the event at the following social networks and share it with your friends:</p>
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://www.facebook.com/events/1715901285116530/" class="btn btn-default btn-lg">
<i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row">
<a href="#" class="btn btn-circle page-scroll btn-next-section"></a>
</div>
</section>
<section id="androidapp" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>The App</h2>
<p>
We created an android app for the journey.
It is not necessary for the game, but we believe it will make it more fun for you.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-2">
<ul class="text-left">
<li>Track your movement and compare it with other players after the game</li>
<li>Know exactly where you and where the checkpoints are</li>
<li>Remember when you passed a checkpoint</li>
<li>Get statistics about your game</li>
<li>Optionaly share your location with us, so we can create neat graphics of the course of the game</li>
</ul>
</div>
<div class="col-lg-2">
<img class="img-responsive" src="img/app_screenshot.png" />
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-2">
<p>
Get the app at the app store or (if you don't use Google Play) send an e-mail to
<a data-hiddenml-1="NwYW4gY2xhc3M9Im9ubGluZS5kZSI+PC9zcGFuPmFuaTxiIGNsYXNzPSJoaWRlIj5naWY8L2I+bWE8c3Bhbj5sJiN4MDAwMkU7PC9zcGFuPmQ8L3NwYW4+ZTxpPjwvaT48Yj48L2I+" data-hiddenml-b="PGI+PC9iPnRp" data-hiddenml-z="4+bG08YSBjbGFzcz0iaGlkZSI+PC9hPmFuLWo8aT48L2k+b3U8aSBjbGFzcz0iaGlkZSI+KzwvaT5ybmV5PGIgY2xhc3M9ImIgaGlkZSI+YXBwPC9iPmFwcCU0MHQtPH" href="#"></a> to get it.
</p>
</div>
<div class="col-lg-2">
<a href="https://play.google.com/store/apps/details?id=de.t_animal.journeyapp">
<img class="img-responsive" alt="Get it on Google Play" src="img/gplay.png"/>
</a>
</div>
</div>
<div class="row">
<a href="#attribution" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</section>
<section id="attribution" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>Attributions</h2>
<p>Video: <a href="https://unitfau.blogspot.de/">tºfau</a></p>
<p>Actors: <a href="https://www.facebook.com/ParkourErlangen">Parkour Erlangen</a></p>
<p>Music: <a href="https://krmnn.de/">Samoht</a></p>
<p>Game Concept: <a href="http://ichaseyou.com/">SF0 and ichaseyou.com</a></p>
<h2>Impressum</h2>
<p>
<address>Julian Hammer<br/>
Martensstr. 1<br/>
91058 Erlangen</address>
</p>
<p>
<a href="#" data-hiddenml-1="b21haW4iIGNsYXNzPSJoaWRlIj5yb290QGxvY2FsaG9zdC5sb2NhbGRvbWFpbjwvYT5hdzxpPjwvaT5vLm48Yj48L2I+ZXQ=" data-hiddenml-a="PHNwYW4+ajwvc3Bhbj48aT48L2k+bzxiPjwvYj51PHN0cm9uZz48L3N0cm9uZz5yPG1hcmsgY2xhc3M9Im1hcmsgaGlkZSI+PC9tYXJrPm5lPGIgY2xhc3M9ImhpZGUiPiZuYnNwOzwvYj55QGg8YSBocmVmPSJtYWlsdG86cm9vdEBsb2NhbGhvc3QubG9jYW"></a>
</p>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
</div>
</div>
<div class="row">
<a href="#" class="btn btn-circle page-scroll btn-next-section"></a>
</div>
</section>
<footer class="footer container text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2>Previous Journeys</h2>
<ul class="list-inline">
<li><a href="2014">2014</a></li>
<li><a href="2015">2015</a></li>
<li><a href="2016">2016</a></li>
</ul>
</div>
</div>
</footer>
<!-- JavaScript Files -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/jquery.easing/jquery.easing.min.js"></script>
<script src="node_modules/startbootstrap-grayscale/js/grayscale.min.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="node_modules/leaflet/dist/leaflet.js"></script>
<!-- Google Maps API Key - You will need to use your own API key to use the map feature -->
<!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>-->
<script src="script.js" charset="utf-8" async></script>
</body>
</html>