habitica/views/app/index.html

<Title:>
  HabitRPG
  
<Head:>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<Header:>
  <!-- SEO text, else Google gets strange copy -->
  <h2 style="display:none;">A habit tracker app which treats your goals like a Role Playing Game. As you accomplish goals, you level up. If you fail your goals, you lose hit points. Lose all your HP and you die.</h2>

  <ui:connectionAlert>
  <div id="head">
    <div class='pull-right'>
       <a class='btn pull-right' onClick="$('#copy-link-section').toggle();"><i class=icon-user></i></a><br/>
       <div id=copy-link-section style='display:none;' class=well>
         <h3>Secret Link</h3>
         <p>Authentication isn't yet available (<a href="https://github.com/lefnire/habitrpg#how-do-i-log-in--save-my-data">follow progress here</a>),<br/> 
           In the meantime a persistent URL can be used accross <br/>
           browsers to access your data. Bookmark the following URL.</p>
         <input type=text class=input-xlarge value="{_purl}" onClick="$(this).select();"/>
       </div>
    </div>
    <!--<% if current_user %>-->
      <table id="character">
        <tr>
          <td id="avatar">
            <div class='avatar-sprites'>
              <img class='weapon weapon-{_user.items.weapon}' src="/img/BrowserQuest/habitrpg_mods/weapon{_user.items.weapon}.png" />
              <img class='armor armor-{_user.items.armor}' src="/img/BrowserQuest/habitrpg_mods/armor{_user.items.armor}.png" />
            </div>
            <div id="lvl"><span class="badge badge-info">Lvl: {_user.stats.lvl}</span></div>
          </td>
          <td id="bars">
            <div class="progress progress-danger">
              <span class="progress-text">HP: {round(_user.stats.hp)} / 50</span>
              <div class="bar" style="width: {percent(_user.stats.hp, 50)}%;"></div>
            </div>

            <div class="progress progress-warning">
              <span class="progress-text">
                {#if _user.history.exp}
                  <a x-bind=click:toggleChart data-toggle-id="exp-chart" data-history-path="_user.history.exp"><i class=icon-signal></i></a>&nbsp;
                {/}
                Exp: {round(_user.stats.exp)} / {_user._tnl}
              </span>
              <div class="bar" style="width: {percent(_user.stats.exp,_user._tnl)}%;"></div>
            </div>
          </td>
        </tr>
        
        <tr>
          <td colspan=2>
            <div id="exp-chart" style="display:none;"></div>
          </td>
        </tr>
      </table>
    <!--<% else %>
      <h1>HabitRPG</h1>
      <p>A habit tracker app which treats your goals like a Role Playing Game. <a href="https://github.com/lefnire/habitrpg#habitrpg">More Information</a></p>
    <% end %>-->
  </div>
  
<Body:>
  <br/>
  
  <!-- Revive Modal -->
  <div style="{#unless equal(_user.stats.lvl,0)}display:none;{/}"> 
    <div data-action="backdrop" class="modal-backdrop"></div>
    <div class="modal" id="dead-modal">
      <div class="modal-body">
        <img src="/img/BrowserQuest/habitrpg_mods/dead.png" />
        <h3>You're Dead</h3>
        <p><a x-bind=click:revive class="btn btn-danger btn-large">Revive</a></p>
      </div>
    </div>
  </div>
  
  <div id=wrap class=container-fluid>
    {#if _debug}
    <div class="alert">
      <i class="icon-warning-sign"></i> <b>Debugging Options</b><br/><br/>
      <a x-bind=click:poormanscron class="btn">Cron</a>
      <a x-bind=click:endOfDayTally class="btn">Tally</a>
      <a x-bind=click:updateSchema class="btn">Update Schema</a>
    </div>
    {/}
    
    <div id=main class=row-fluid>
      <!-- would rather have one component: <app:taskList>, which handles taskList, task, and newTask.  However,
        can't pass references as paramters.  so <app:taskList newModel={_newHabit} list={_habitList}> doesn't work
        and have to pass those in via {{{content}}} instead -->  
      
      <!--helpTitle & helpContent moved to tour -->
      <app:taskColumn title="Habits">
        <ul class='habits'>{#each _habitList as :task}<app:task />{/}</ul>
        <app:newTask type=habit><input value={_newHabit} type="text" placeholder="New Habit"/></app:newTask>
      </app:taskColumn>
      
      <app:taskColumn title="Daily">
        <ul class='dailys'>{#each _dailyList as :task}<app:task />{/}</ul>
        <app:newTask type=daily><input value={_newDaily} type="text" placeholder="New Daily"/></app:newTask>
      </app:taskColumn>

      <app:taskColumn title="Todos" type="todo">
        <div class="tabbable"> <!-- Only required for left/right tabs -->
          <ul class="nav nav-pills">
            <li class="active"><a href="#tab1" data-toggle="tab">Remaining</a></li>
            <li><a href="#tab2" data-toggle="tab">Complete</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab1">
              <ul class='todos'>
                {#each _todoList as :task}<app:task />{/}
              </ul>
              <app:newTask type=todo><input value={_newTodo} type="text" placeholder="New Todo"/></app:newTask>
            </div>
            <div class="tab-pane" id="tab2">
              <ul class='completeds'>
                {#each _completedList as :task}<app:task />{/}
              </ul>
              <a x-bind=click:clearCompleted>Clear Completed</a>
            </div>
          </div>
        </div>
        {#if _user.history.todos}
          <a x-bind=click:toggleChart data-toggle-id="todos-chart" data-history-path="_user.history.todos"><i class=icon-signal></i></a>
          <div id="todos-chart" style="display:none;"></div>
        {/}
      </app:taskColumn>

      <app:taskColumn title="Rewards" type="reward">
        <div id="money">{gold(_user.stats.money)} <img src='/img/coin_single_gold.png'/>  {silver(_user.stats.money)} <img src='/img/coin_single_silver.png'/></div>
        <ul class='rewards'>
          {#each _rewardList as :task}<app:task />{/}
        </ul>
        
        {#if _user.items.itemsEnabled}        
          <ul class='items'>
            {#with _items.armor as :item}<app:item />{/}  
            {#with _items.weapon as :item}<app:item />{/}  
            {#with _items.potion as :item}<app:item />{/}  
            {#with _items.reroll as :item}<app:item />{/}  
          </ul>
        {/}
        
        <app:newTask type=reward><input value={_newReward} type="text" placeholder="New Reward"/></app:newTask>
      </app:taskColumn>
    </div>
  </div>
  <app:myFooter/>
    
<myFooter:>
  <footer id=footer class=pull-right>
    <table class=social-links>
      <tr>
        
        <td>
          Copyright &copy; 2012 Tyler Renelle&nbsp;&nbsp;&nbsp;
        </td>
        
        {#unless _mobileDevice}
        <td>
          <!-- Github -->
          <iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=lefnire&repo=habitrpg&type=watch&count=true"
          allowtransparency="true" frameborder="0" scrolling="0" width="90px" height="20px"></iframe>
        </td>
          
        <td>
          <!-- Gittip -->
          <!-- <iframe style="border: 0; margin: 0; padding: 0;" src="https://www.gittip.com/lefnire/widget.html" width="48pt" height="20pt"></iframe> -->
        </td>
        
        <td>
          <!-- AddThis Button BEGIN -->
          <!--<div class="addthis_toolbox addthis_default_style ">
            <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
            <a class="addthis_button_tweet"></a>
          </div>-->
          <!-- AddThis Button END -->
          <a href="https://twitter.com/share" class="twitter-share-button" data-via="lefnire">Tweet</a>
        </td>
        {/}
         
      </tr>
    </table>
  </footer>
  
<taskColumn: nonvoid>
  <div class="span3 well {{{type}}}s">
    <!--removing for now, help-info in the tour instead-->
    <!--<span class="help-icon" rel="popover" data-placement="bottom" data-original-title="{{{helpTitle}}}" data-content="{{{helpContent}}}"><i class="icon-question-sign"></i></span>-->
    <h1>{{{title}}}</h1>
    {{{content}}}
  </div>
  
<newTask: nonvoid>
  <form class="form-inline" data-task-type={{{type}}} x-bind=submit:addTask>
    {{{content}}}
    <input class="btn" type=submit value=Add>
  </form>

<task:>
  <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value)}">
    <pre>
    <div class="task-meta-controls">

      <div class="hover-show">
        <a x-bind=click:toggleTaskEdit data-hide-id="{{:task.id}}-chart" data-toggle-id="{{:task.id}}-edit"><i class="icon-pencil"></i></a>
        {#if :task.history}
          <a x-bind=click:toggleChart data-toggle-id="{{:task.id}}-chart" data-hide-id="{{:task.id}}-edit" data-history-path="_user.tasks.{{:task.id}}.history">
            <i class="icon-signal"></i>
          </a>
        {/}
      </div>
      
      {#if :task.notes}
        {#if equal(:task.type,'reward')}
          <span rel="popover" data-placement="left" data-content="{:task.notes}" data-original-title="{:task.text}" class='task-notes'><i class="icon-comment"></i></span>
        {else}
          <span rel="popover" data-content="{:task.notes}" data-original-title="{:task.text}" class='task-notes'><i class="icon-comment"></i></span>
        {/}  
      {/}
    </div>
    
    <div class="task-controls">
      <!-- Habits -->
      {#if equal(:task.type, 'habit')}
        {#if :task.up}<a data-direction=up x-bind=click:vote><img src="/img/add.png" /></a>{/}
        {#if :task.down}<a data-direction=down x-bind=click:vote><img src="/img/remove.png" /></a>{/}
      <!-- Rewards -->
      {else if equal(:task.type, 'reward')}
        <a x-bind=click:vote class="buy-link" data-direction=down>{:task.value}<img src="/img/coin_single_gold.png"/></a>
      <!-- Daily & Todos -->
      {else}  
        <input type=checkbox checked="{:task.completed}"/>
      {/}
    </div>
    <div class="task-text">{:task.text}</div>

    <app:taskMeta />
    </pre>
  </li>
  
<taskMeta:>
  <div style="display:none;" id={{:task.id}}-edit>
    <hr/>
    <form x-bind=submit:toggleTaskEdit data-toggle-id="{{:task.id}}-edit">
      <div class=control-group>
        <label>Text</label><input type=text value={:task.text} />
        <label>Notes</label><textarea rows=3>{:task.notes}</textarea>
      </div>
      {#if equal(:task.type, 'habit')}
        <div class="control-group">
          <label class="checkbox inline"><input type=checkbox checked={:task.up}>Up</label>
          <label class="checkbox inline"><input type=checkbox checked={:task.down}>Down</label>
        </div>
      {/}
      {#if equal(:task.type, 'reward')}
        <div class=control-group>
          <label>Price
            <div class="input-append">
              <input class="span2" size="16" type="text" value={:task.value}><span class="add-on">Gold</span>
            </div>
          </label>
        </div>
      {/}
      <button type=submit class="btn">Save</button>
      <button x-bind=click:del class="btn btn-danger">Delete</button>
    </form>
  </div>
  
  <div style="display:none;" id={{:task.id}}-chart></div>
  
<item:>
  <li class="task reward item">
    <pre>
      <div class="task-meta-controls">
        <span rel="popover" data-placement="left" data-content="{:item.notes}" data-original-title="{:item.text}" class='task-notes'><i class="icon-comment"></i></span>
      </div>
      <div class="task-controls">
        {{{#unless disabled}}}
          <a x-bind=click:buyItem class="item-buy-link" data-type={:item.type} data-value={:item.value} data-index={:item.index}>{:item.value}<img src="/img/coin_single_gold.png"/></a>
        {{{/}}}
      </div>
      <div class="task-text"><img src="/img/BrowserQuest/habitrpg_mods/{:item.icon}.png" /> {:item.text}</div>
    </pre>
  </li>

<!-- Required scripts, needed by ready() -->
<Scripts:>
  <script src=/js/jquery.min.js></script><!-- http://code.jquery.com/jquery-1.7.2.min.js -->
  {#unless _mobileDevice}<script src=/js/jquery-ui.min.js></script>{/}
  <script src=/js/underscore-min.js></script><!-- http://underscorejs.org/underscore-min.js -->
  <script src=/js/bootstrap.min.js></script><!-- http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js -->
  <script src=/js/jquery.cookie.js></script><!-- https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js -->
  <script src=/js/bootstrap-tour.js></script><!-- https://raw.github.com/pushly/bootstrap-tour/master/bootstrap-tour.js -->
  
<!-- Scripts not needed right away (google charts) or entirely optional (analytics) -->
<Tail:>
  {#unless _mobileDevice}
  <script src=/js/google-jsapi.js></script><!-- https://www.google.com/jsapi -->
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(function(){});
  </script>
  {/}
  
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-33510635-1']);
    _gaq.push(['_trackPageview']);
  
    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>
  
  <!-- Addthis -->
  <!--<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=lefnire"></script>-->
  
  <!-- Twitter -->
  {#unless _mobileDevice}<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>{/}