phonegap.html

## phonegap.html
<!doctype html>
<html>
 <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <title>everyday.io</title>
  {% if g and g.debug %}
  <link rel="stylesheet" href="css/colorslider.css" />
  <link rel="stylesheet" href="css/dateinput.css" />
  <link rel="stylesheet" href="css/bootstrap-1.3.0.min.css">
  <link rel="stylesheet" href="css/phonegap.css" />
  {% else %}
  <link rel="stylesheet" href="css/all-phonegap-min-12121454.css"/>
  {% endif %}
 </head>
 <body>

  <div class="actionsbar">
   <img src="css/images/everydaylogo_mobile.png">
  </div>

  <!-- Header -->
  <div id="mobile-header" class="topbar-wrapper navigation">
    <div class="topbar">
      <div class="topbar-inner">
        <div class="container-fluid">
          <ul id="nav-bar" class="nav">
            <li class="active" tabindex="-1">
             <a rel="internal" href="#mobile-log-page" tabindex="-1">
             Log
             </a></li>
            <li tabindex="-1">
             <a rel="internal" href="#mobile-stream-page" tabindex="-1">
             Stream
             </a></li>
          </ul>
          <ul class="nav secondary-nav" tabindex="-1">
            <li tabindex="-1">
              <a id="logout-button" tabindex="-1" href="javascript:void(0)">Logout</a>
            </li>
          </ul>
        </div>
      </div>
     </div>
  </div>
  <!-- /Header -->


  <!-- Pages -->
  <div id="mobile-pages" class="container-fluid">

    <!-- Splash -->
    <div id="mobile-splash-page" class="mobile-page">
        Loading...
    </div>
    <!-- /Splash -->

    <!-- Login -->
    <div id="mobile-login-page" class="mobile-page">
      <p id="mobile-login-welcome">Welcome! Please login with either your Facebook account or email &mdash;
      whatever you signed up with.</p>
      <p id="mobile-login-again" style="display:none">Sorry, you don't seem to be logged in anymore. Please login again.</p>

      {% include "_login_facebook.html" %}

      <form class="form-stacked">or...</form>

      {% include "_login.html" %}

      <p>(Not a user yet? <a href="http://everyday.io">Sign up online.</a>)</p>

    </div>
    <!-- /Login -->

    <!-- Stream -->
    <div id="mobile-stream-page" class="mobile-page">
      <div id="stream">
      {% include "_stream.html" %}
      </div>
    </div>
    <!-- /Stream -->

    <!-- Log -->
    <div id="mobile-log-page" class="mobile-page">

      <p class="stream-updates alert-message warning" style="display:none; cursor: pointer; margin-bottom: 5px; padding: 3px 14px; width: 90%;">
      <span class="stream-updates-num">There are updates in your stream.</span> Click to view.
      </p>

      <h3><span id="mobile-log-date"></span><a rel="internal" href="#mobile-date-page" style="margin-left: 10px;"><img src="img/calendar.png"></a>
      </h3>

      <div id="mobile-log-links">
        <a type="button" id="mobile-quickpic-link" class="btn large" style="text-align: center;" tabindex="-1">
          <span class="icon-camera"></span> Quick Pic
        </a>

        <a id="mobile-measurements-link" rel="internal" href="#mobile-measurements-page" class="btn large" tabindex="-1">
          <span class="circle-icon">...</span> Measurements   <span class="save-status"></span>
        </a>
        <a id="mobile-meals-link"        rel="internal" href="#mobile-meals-page" class="btn large" tabindex="-1">
          <span class="circle-icon">...</span> Meals          <span class="save-status"></span>
        </a>

        <a id="mobile-foodgoals-link"    rel="internal" href="#mobile-foodgoals-page" class="btn large" tabindex="-1">
          <span class="circle-icon">...</span> Food Goals     <span class="save-status"></span>
        </a>

        <a id="mobile-foodbonuses-link" rel="internal" href="#mobile-foodbonuses-page" class="btn large" tabindex="-1">
          <span class="circle-icon">...</span> Food Bonuses   <span class="save-status"></span>
        </a>
        <a id="mobile-tags-link"       rel="internal" href="#mobile-tags-page" class="btn large" tabindex="-1">
          <span class="circle-icon">...</span> Tags           <span class="save-status"></span>
        </a>
        <a id="mobile-notes-link"      rel="internal" href="#mobile-notes-page" class="btn large" tabindex="-1">
          <span class="circle-icon">...</span> Notes          <span class="save-status"></span>
        </a>

        <a id="mobile-feedback-link"   rel="internal" href="#mobile-feedback-page" class="btn small" tabindex="-1" style="width: 150px; margin: auto; text-align: center; margin-top: 5px;">
          Feedback <span class="save-status" style="float:none"></span>
        </a>

      </div>

    </div>
    <!-- /Home -->

    <!-- Feedback -->
    <div id="mobile-feedback-page" class="mobile-page">
      <form id="mobile-log-feedback-form" class="form-stacked">
        <div class="page-header">
          <h4>Send us feedback</h4>
        </div>
        <p>Something not working right? Or something that could work better? Let us know. Thanks! </p>
        <input type="hidden" name="source" value="mobile">
        <textarea name="comment" style="width:98%; height: 50px; margin-bottom: 10px;"></textarea>
        <div id="mobile-feedback-logs" style="display:none"></div>
        <div style="height:70px;">&nbsp;</div>

        {% include "_log_form_buttons.html" %}

      </form>
    </div>
    <!-- /Feedback -->

    <!-- (Debug) Logs -->
    <div id="mobile-logs-page" class="mobile-page">

      <div class="page-header">
        <h4>Debug Logs</h4>
      </div>

      <p>This is just for when something goes wrong. If you got here accidentally, press back or the top logo.
      Nothing to see here! :) </p>

      <pre id="logs-viewer"></pre>
    </div>
    <!-- /Logs -->

    <!-- Measurements -->
    <div id="mobile-measurements-page" class="mobile-page">

      <div class="page-header">
        <h4>Measurements</h4>
      </div>

      <form id="mobile-log-measurements-form">
        <input type="hidden" name="date">

        {% include "_log_measurements.html" %}

        {% include "_log_form_buttons.html" %}

      </form>

    </div>
    <!-- /Measurements -->


    <!-- Meals -->
    <div id="mobile-meals-page" class="mobile-page">

      <div class="page-header">
        <h4>Meals</h4>
      </div>

      <form id="mobile-log-meals-form" class="form-stacked">

        <input type="hidden" name="date">

        {% include "_log_meals.html" %}

        {% include "_log_form_buttons.html" %}

      </form>
    </div>
    <!-- /Meals -->

    <!-- Food Goals -->
    <div id="mobile-foodgoals-page" class="mobile-page">

      <div class="page-header">
        <h4>Food Goals</h4>
      </div>

      <form id="mobile-log-foodgoals-form" class="form-stacked">
        <input type="hidden" name="date">

        {% include "_log_foodgoals.html" %}

        {% include "_log_form_buttons.html" %}

      </form>

    </div>
    <!-- /Food Goals -->

    <!-- Food Bonuses -->
    <div id="mobile-foodbonuses-page" class="mobile-page">

      <div class="page-header">
        <h4>Food Bonuses</h4>
      </div>

      <form id="mobile-log-foodbonuses-form" class="form-stacked">
        <input type="hidden" name="date">

        {% include "_log_foodbonuses.html" %}

        {% include "_log_form_buttons.html" %}

      </form>

    </div>
    <!-- /Food Goals -->

    <!-- Tags -->
    <div id="mobile-tags-page" class="mobile-page">

      <div class="page-header">
        <h4>Tags</h4>
      </div>

      <form id="mobile-log-tags-form" class="form-stacked">

        <input type="hidden" name="date">

        {% include "_log_tags.html" %}

        {% include "_log_form_buttons.html" %}

      </form>

    </div>
    <!-- /Tags -->


    <!-- Notes -->
    <div id="mobile-notes-page" class="mobile-page">

      <div class="page-header">
        <h4>Notes</h4>
      </div>

      <form id="mobile-log-notes-form" class="form-stacked">

        <input type="hidden" name="date">

        {% include "_log_notes.html" %}

        {% include "_log_form_buttons.html" %}

      </form>

    </div>
    <!-- /Notes -->

    <!-- Date -->
    <div id="mobile-date-page" class="mobile-page">
      <div style="height:20px;">&nbsp;</div>
      <input type="text" name="date" id="mobile-date-input" value=""/>
    </div>
    <!-- /Date -->

  </div>

  <!-- /Pages -->
{% if g and g.debug %}
<script src="js/libs/zepto.js"></script>
<script src="js/libs/date.format.js"></script>
<script src="js/libs/jsrender.js"></script>
<script src="js/libs/colorslider.js"></script>
<script src="/js/libs/timeago.js"></script>
<script src="js/libs/lscache.js"></script>
<script src="js/libs/personalize.js"></script>
<script src="js/libs/stacktrace.js"></script>
<script src="js/libs/bootstrap.datepicker.js"></script>
<script src="js/util.js"></script>
<script src="js/data.js"></script>
<script src="js/models.js"></script>
<script src="js/shared.js"></script>
<script src="js/mobile.js"></script>
{% else %}
<script src="js/libs/zepto-min.js"></script>
<script src="js/all-phonegap-min-12121454.js"></script>
{% endif %}
<script>
if (window.Zepto) $.noConflict();
$(document).ready(function() {
  ED.mobile.setupMobile();
});
</script>
<script src="js/libs/phonegap-1.2.0.js"></script>
<script src="js/libs/phonegap-fb.js"></script>
{% if native %}
<script>
document.addEventListener('deviceready', function() {
  ED.mobile.setupPhonegap();
}, false);
</script>
{% else %}
<script>
  window.setTimeout(function() {
    ED.mobile.setupData();
  }, 300);
</script>
{% endif %}
</body>
</html>