Jinja2 Template Example (Everyday.io Log)

log.html

{% extends "yourbase.html" %}

{% block subheader %}
<div class="page-header">
<h1>
  <span id="log-date">{{ title }}</span>
  <a data-tooltip="Change the date" id="log-date-button" href="javascript:void(0);" style="margin-left: 10px;"><img src="img/calendar.png"></a>
</h1>
</div>
{% endblock %}

{% block content %}
<form id="log-form">

  <div class="alert-message block-message help-message">
   <p><b>Welcome!</b> It looks like this is your first time logging, so we'll walk you through it.
   If you want to bring back this help in the future, click the "?" button next to each section. Oh,
   and if you ever have feedback about logging or anything else, click the big feedback button in the bottom right.
   </p>
   <p>
   Ready? Let's go!
   </p>
  </div>

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

  <section id="log-measurements">
    <div class="page-header">
      <h4>Measurements
       <button type="button" class="btn small help-button">?</button>
      </h4>

    </div>

    <div>

    <div class="alert-message block-message help-message">
      <p>
      We recommend taking your measurements at the same time each day (like before breakfast)
      so that it's not as affected by what you've eaten that day.
      Of course, your measurements will still fluctuate from water weight, so
      we'll calculate a "moving average" and display that in your stats alongside your recorded measurements.
      If you don't want to log your measurements on a particular day,
      just leave this blank.
      </p>
    </div>


    {% include "_log_measurements.html" %}

    {% include "_log_period.html" %}
    </div>
  </section>

  <section id="log-mealfoods">

    <div class="page-header">
      <h4>Meals
      <button type="button" class="btn small help-button">?</button>
      </h4>
    </div>
    
    <div>

    <div class="alert-message block-message help-message">
     <p>You can either log your meals using free-form text (the default) or you
     can log the details for each meal separately. 
     Some people find it easier just to write a paragraph or list of their meals,
     but others like the structure of meal-by-meal logging.
     </p>
     <p>
     To change modes, just click the right-hand link. You can change the mode
     each day, so don't worry about being stuck with one or the other.
     </p>
    </div>

    <div id="log-meals" style="display:none">
      <span style="float:right"><a id="log-foods-switch" href="javascript:void(0);">(Switch to free-text logging)</a></span>
     {% include "_log_meals.html" %}
    </div>
    
    {% include "_log_foods.html" %}
    </div>

  </section>

  <section id="log-foodgoals">


    <div class="page-header">
      <h4>Food Goals
       <button type="button" class="btn small help-button">?</button>
      </h4>
    </div>
    
    <div>

    <div class="alert-message block-message help-message">
     <p>This is where you evaluate how well you did with your goals each day- 
     typically you'd fill this out at the end of the day.
     </p>
     <p>
     For each of your goals, grab the slider and drag it to indicate approximately
     how much you ate of that type of food. If you drag it to the left towards 'none',
     it will turn green (which is a good thing!), and if you drag it to the right towards
     'lots', it will turn red (not so good).
     We use the same coloring on your stats and stream, so you'll get used to it.
     It's up to you how far you drag the slider - it's more important to reflect and be aware
     on how you're doing with your goals than to be exact about it. We don't want you stressing
     about measuring everything to a tee. 
     </p>
     <p>If you're not sure what counts as a particular food type, click the "?" button to the right of the slider.
     </p>

    </div>

    {% include "_log_foodgoals.html" %}
    </div>

  </section>
  
  <br><br>

  <section id="log-foodbonuses">

    <div class="page-header">
      <h4>Food Bonuses
        <button type="button" class="btn small help-button">?</button>
      </h4>
    </div>

    <div>

      <div class="alert-message block-message help-message">
       <p>These are just some goals that we think will help everyone get healthier
       in a more sustainable, natural way. Check off the ones that apply to you each day.
       </p>
       <p>Tip: one great way of checking off multiple of these at once is to subscribe to a 
       <a href="http://www.localharvest.org/csa/">CSA</a> and get weekly shipments of local veggies.
       </p>

      </div>

      {% include "_log_foodbonuses.html" %}
    </div>

  </section>

  
  <section id="log-tags">

    <div class="page-header">
      <h4>Tags
        <button type="button" class="btn small help-button">?</button>
      </h4>
    </div>

    <div>

      <div class="alert-message block-message help-message">
       <p>You can use tags to mark days you <em>walktowork</em>, <em>bike</em>, <em>skiplunch</em>, <em>party</em>, etc. - 
       anything that might affect your progress and that happens semi-regularly.
       </p>

      </div>

      {% include "_log_tags.html" %}
    </div>

  </section>

  <!-- Notes -->
  <section id="log-notes">
    
    <div class="page-header">
      <h4>Notes
        <button type="button" class="btn small help-button">?</button>
      </h4>
    </div>

    <div>

     <div class="alert-message block-message help-message">
      <p>You can use the notes to describe how you felt today (high energy? under the weather?),
      rant about something that made your goals hard to meet today, describe your daily activities -
      it's completely up to you.
      Keep in mind that your notes (like the rest of your log) will be visible to your buddies.
      </p>
     </div>

      {% include "_log_notes.html" %}
    </div>

  </section>

  <div class="actions">
    <button class="btn save-button primary" type="submit" data-startmsg="Save" data-loadingmsg="Saving..." data-successmsg="Saved!" data-redirect="/" disabled>Save</button>
    <div class="error-message"></div>
  </div>

</form>


<div id="log-foods-photo-picker" class="modal hide" style="display:none;">
  <div class="modal-header">
    <a href="#" class="close">&#x00D7;</a>
    <h3>Add a photo</h3>
  </div>
  <div class="modal-body">
    <form id="log-foods-photo-form">
    <input type="hidden" name="date" readonly>
    <div class="clearfix">
      <label>Upload a file:&nbsp;</label>
      <div class="input">
        <input type="file" id="log-foods-photo-input" name="photo_file"/>
      </div>
    </div>
    <div class="clearfix" style="display:none">
      <label>Or specify a URL:&nbsp;</label>
      <div class="input">
        <input type="text" id="log-foods-photo-url" name="photo_url"/>
      </div>
    </div>
  </div>
  </form>
</div>

<div id="log-date-picker"  class="modal hide" style="display: none; width: 340px; height: 340px;">
  <div class="modal-header">
    <a href="#" class="close">×</a>
    <h3>Pick a different date</h3>
  </div>
  <div class="modal-body">
    <input type="date" value="" style="margin-left: 20px;"/> 
  </div>
</div>

<div id="log-date-pickone"  class="modal hide" style="display: none;">
  <div class="modal-header">
    <h3>Hmm...</h3>
  </div>
  <div class="modal-body">
    <p>Since it's early morning where you are, we're not sure whether you want to update your log for 
    yesterday or today. Which one is it?</p>

    <a id="log-date-pickone-yesterday" href="" class="btn large primary">Yesterday (<span></span>)</a>
    <a id="log-date-pickone-today" href="" class="btn large secondary">Today (<span></span>)</a>
  </div>
</div>


{% endblock %}

{% block readyscript %}
{{ super() }}
ED.web.setupPage('log');
{% endblock %}