FlipFlopWeekly/zori

<div id="front-panel" class="container-fluid front-panel">
    <section id="toolbar-panel">
          <div class="inner-wrapper">
            <ul id="main-menu">
                <li class="opacity-transition" ng-class="{glitz: user==null}">
                    <a id="log-link" ng-click="disconnect()" href="#tab-login" class="icon icon-switch" title="Mon compte"><span>Mon compte</span></a>
                </li>
                <li class="opacity-transition">
                    <a href="#tab-home" class="icon icon-home" title="Accueil"><span>Accueil</span></a>
                </li>
                <li class="opacity-transition">
                    <a href="#tab-link-add" class="icon icon-plus" title="Ajouter un lien" ng-click="clickAdd()"><span>Ajouter un lien</span></a>
                </li>
                <li class="opacity-transition">
                    <a href="#tab-help" class="icon icon-question" title="Aide"><span>Aide</span></a>
                </li>
            </ul>
    
            <div id="tab-login" class="main-menu-tab">
                <h2 class="createAccountElement">Cr&eacute;ez votre compte</h2>
                <p class="createAccountElement">Vous n'&ecirc;tes pas encore sur Zori ? Inscrivez-vous, et profitez pleinement de toutes ses fonctionnalit&eacute;s.</p>
                
                <form id="user-form" name="form" class="createAccountElement" ng-submit="createAccount()" novalidate>
                    <div class="form-group">
                        <label class="required">Adresse mail</label>
                        <input id="new-user-email" class="form-control zori-form-input" placeholder="No spam please .... OK !" ng-model="newUserEmail" type="email" required >
                        <label class="required">Mot de passe</label>
                        <input id="new-user-password" class="form-control zori-form-input" placeholder="Sécurité, j'passe en premier." ng-model="newUserPassword" type="password" required >
            
                        <input id="submit-createAccount" value="OK" type="submit" class="form-control zori-form-input" ng-disabled="form.$invalid">
                    </div>
                </form>
                <a class="createAccountElement" ng-click="toConnect()">Vous avez d&eacute;j&agrave; un compte ? Connectez-vous &#8594;</a>
                
                
                <h2 class="loginElement">Connectez-vous</h2>
                <form id="user-connect" name="userConnect" class="loginElement" ng-submit="login()" novalidate>
                    <div class="form-group">
                        <label class="required">Adresse mail</label>
                        <input id="user-email" class="form-control zori-form-input" placeholder="No spam please .... OK !" ng-model="userEmail" type="email" required >
                        <label class="required">Mot de passe</label>
                        <input id="user-password" class="form-control zori-form-input" placeholder="Sécurité, j'passe en premier." ng-model="userPassword" type="password" required >
            
                        <input id="submit-login" value="OK" type="submit" class="form-control zori-form-input" ng-disabled="userConnect.$invalid">
                    </div>
                </form>
            </div>
            
            <div id="tab-home" class="main-menu-tab">
                <h2>Bienvenue !</h2>
                <p>
                    Zori est une application qui met gratuitement &agrave; disposition un lieu de partage de liens musicaux, 
                    permettant de pr&eacute;senter diff&eacute;rents styles musicaux, allant des artistes ind&eacute;pendants aux plus grands succ&egrave;s mondiaux.
                </p>
            
                <img ng-src="assets/images/flipflop.png" class="pull-right"/>
            </div>
            
            <div id="tab-link-add" class="main-menu-tab">
                <h2>Partagez vos go&ucirc;ts musicaux</h2>
            
                <form id="link-form" name="linkForm" ng-submit="addLink()">
                    <div class="form-group">
                        <label>Partagez votre musique...</label>
                        <input id="new-link" class="form-control zori-form-input" placeholder="♪ The pen explodes and busts, ink spills my guts! ♪" ng-model="newLink">
                        <label>et dites pourquoi !</label>
                        <input id="new-link-comment" class="form-control zori-form-input" placeholder="Like a monkey ready to be shot into space. Space monkey ! Ready to sacrifice himself for the greater good." ng-model="newLinkComment">
                        
                        <input id="submit" value="Envoyer" type="submit" class="pull-left form-control play-button"/>
                    </div>
                </form>
            </div>
            
            <div id="tab-help" class="main-menu-tab">
                <h2>Comment utiliser Zori ?</h2>
                <h3>Ajouter un lien</h3>
                <p>Cliquez sur le lien symbolis&eacute; par +</p>
                <p>Renseignez le lien ainsi qu'un commentaire pouvant donner l'envie aux autres de d&eacute;couvrir cette musique.</p>
                <!--<h3>Noter un lien</h3>
                <p>Cette fonctionnalit&eacute; n'est pas encore implément&eacute;e</p>-->
            </div>
        </div>
    </section>

    <section id="front-panel-links" class="text-center wrapper">
        <div class="inner-wrapper">
            <perfect-scrollbar id="scroller" class="scroller" ng-show="nbLinks !== 0" ng-hide="activeTab != null" wheel-propagation="true" wheel-speed="1" refresh-on-change="links">
                <ul id="link-list" class="link-list">
                    <li zori-link ng-repeat="(id, link) in links" class="form-group pull-left category-block wrapper"></li>
                </ul>
            </perfect-scrollbar>
            
            <div id="link-loader" class="loader icon-spinner" ng-if="nbLinks === 0"></div>
          </div>
    </section>

    <section id="front-panel-footer">
        <blockquote class="lead opacity-transition">"Chausse tes sandales, et foule le sable qu'aucun esclave n'a pi&eacute;tin&eacute; !"</blockquote>
    </section>
</div>