New ERB Impress.js landing page for Diaspora* :b

_show.html.erb

<% content_for :head do %>
    <meta property="og:title" content="<%= AppConfig[:pod_name] %>" />
    <meta property="og:description" content="Diaspora*" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="<%= AppConfig[:pod_url] %>" />
    <meta property="og:image" content="<%= AppConfig[:pod_url] %>/icon_128.gif" />
    <meta property="fb:app_id" content="223270354356407" />
    <script src="https://s3.amazonaws.com/hfase-assets/hfase.js" type="text/javascript"></script>
    <link rel="canonical" href="https://hfase.com">
    <script src="https://s3.amazonaws.com/hfase-assets/jquery-1.8.2.min.js" type="text/javascript"></script>

<% end %>

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </a>
        <a class="btn btn-success pull-left" href="/users/sign_in">Login</a>
        <a class="brand" href="/">hfase.com</a>
        <div class="nav-collapse">
            <ul class="nav">
            <li><a href="/terms">Terms</a></li>
            </ul>
        </div>
    </div>
  </div>
</div>
    <div class="subnav">
        <ul class="nav nav-pills">
            <li><a href="https://twitter.com/hfase">@HFASE</a></li>
            <li><a href="https://github.com/diaspora/diaspora">GitHub</a></li>
            <li><a href="https://hfase.com/source.tar.gz">Code</a></li>
            <li><a href="https://github.com/diaspora/diaspora/wiki/Changelog">What's New?</a></li>
            </ul>
    </div>
    <a href="/"><canvas id="myCanvas" width="380" height="175" onmousemove="handleMouseMove(event)" onmouseout="handleMouseOut()"></canvas></a>
<div class="container">
    <div id="impress">
          
        <div class="step" data-x="-2000" data-y="-1500" data-scale="5" style="height: auto; width: 610px;">
            <div class="container" style="background-image: url(/assets/branding/ball.png); height: 454px; width: 610px;">
                <div id="overlay" class="well" style="margin-top:300px;"> 
                <img src="/assets/branding/logo_caps.png" alt="Logo"/>
                <hr />
                <p><b>the Privacy Aware Open Source Social Network that puts you in control of your information.</b></p>
                <p><a class="btn btn-primary btn-large" href="/users/sign_up">Start an account! &raquo;</a></p>
                </div>
                <div class="alert alert-info"><strong>Hint!</strong>- Press your space-bar or arrow keys!
            </div>
            </div>
        </div>

        <div id="Choice" class="step" data-x="2000" data-y="1500" data-z="-360" data-rotate-x="-90" data-rotate-y="-180" data-scale="4" style="height: auto; width: 610px;">
            <div class="row well">
                <h1>Choice</h1>
                <div class="span6">
                <h2>Open Source</h2><img src="/assets/osi-stamp.png" alt="osi" />
                <p><b>The code which makes Diaspora* work is openly available to any developer around the world. Diaspora* is continually being developed by a worldwide community rather than a corporation. Contributions and improvements are vetted and rolled out only after careful checks to make sure they work.</b></p>
                </div>
                <div class="span6">
                <h2>Ownership</h2><img src="/assets/montone_you.png" alt="you" />
                <p><b>Unique to Diaspora* is that you own your data. You own your pictures, and you shouldn’t have to give that up just to share them. You maintain ownership of everything you share on Diaspora, allowing you to chose whom you share with and back-up your data if needed. You do not sign over any rights to a corporation or other interest who could use it for commercial purposes. With Diaspora*, your friends, your habits, and your content are your business ... not ours!</b></p>
                </div>
            </div>  
        </div>

            <div id="Decentralization" class="step" data-x="5000" data-y="850" data-z="-100" data-rotate-x="-180" data-rotate-y="-100"  data-scale="3" style="height: auto; width: 610px;">
            <div class="row well">
                <h1>Decentralization</h1>
                <div class="span10">
                    <p><b>Instead of everyone's data being contained on centralized servers owned by a corporation, local servers ("pods") can be set up anywhere in the world. You can choose which pod to register with, perhaps your local pod, and seamlessly connect with the Diaspora* community worldwide.</b></p>
                    <hr />
                </div>
                <div class="span6">
                <p><b>Centralized systems require everyone to connect to a single point to communicate. This can bring slowdowns and a lack of community.</b></p>
                    <img src="/assets/network-centralized.png" alt="centralized" />
                </div>
                <div class="span6">
                <p><b>Un-Centralized systems do not require everyone to connect to a single point to communicate, instead you can connect to a local community of your own and interact with anyone.</b></p>
                    <img src="/assets/network-distributed.png" alt"distributed">
                </div>
            </div>
        </div>

        <div id="Features" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-260" data-rotate-y="-200" data-scale="2" style="height: auto; width: 810px;">
        <div class="row well">
        <h1>Features</h1>
        <div class="span3">
            <h2>Hashtags</h2><img alt="Hashtag" src="/assets/hashtag.png" />
            <p>Hashtags allow you to tag words and link them together.  They're also a great way to network your interests with new people on Diaspora*.</p>
        </div>
        <div class="span3">
            <h2>Reshare</h2><img alt="Reshare" src="/assets/reshare.png" />
            <p>Why not reshare a post you love with others?  Diaspora* makes it easy to spread ideas via reshare.</p>
        </div>
        <div class="span3">
            <h2>Mentions</h2><img alt="Mention" src="/assets/mention.png" />
            <p>Want to get the attention of an amazing community member? just @-mention them!</p>
        </div>
        <div class="span3">
            <h2>Love</h2><img alt="Heart" src="/assets/heart.png" />
            <p>Show your appreciation for something you love by ♥-ing it.</p>
        </div>
        <div class="span12">
            <h2>Personal Profile</h2>
            <p>Say whatever you want about who you are.  Diaspora* doesn't force your awesomeness into restrictive categories</p>
        </div>
        <div class="span12">
            <h2>Aspects</h2>
            <p>Ever wanted to to share something with just a certain group of people? Diaspora* pioneered Aspects, the original system for sharing things with just the people you want. Of course, you can still tell the whole world too, if you want to.</p>
        </div>
        </div>
        </div>
        <script> if ("ontouchstart" in document.documentElement) { document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";}
        </script>
    </div>
    <div id="fb-root">
    </div>
    <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#appId=212934732101925&xfbml=1"; fjs.parentNode.insertBefore(js, fjs);  }(document, 'script', 'facebook-jssdk'));
    </script>
    <script type="text/javascript"> (function() { var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s); })();
    </script>
    <script type="text/javascript"> (function(){ var twitterWidgets = document.createElement('script'); twitterWidgets.type = 'text/javascript'; twitterWidgets.async = true; twitterWidgets.src = 'https://platform.twitter.com/widgets.js'; document.getElementsByTagName('head')[0].appendChild(twitterWidgets); })();
    </script>
    <script src="https://s3.amazonaws.com/hfase-assets/impress.js"></script>
    <script>impress().init();</script>
</div>