homework/client/view/templates.html

<!-- Homework UI Templates -->

<!-- Nothing template -->
<template name="nothing"></template>

<!-- 3 buttons Navigation Menu -->
<template name="menu">
  <div align="center" class="menu-container">
  <div class="btn-group">
    <button type="button" class="btn btn-success go-archive">
      <i class="fa fa-book fa-inverse"></i> Archive
    </button>
    <button type="button" class="btn btn-primary go-home">
      <i class="fa fa-home fa-inverse"></i> Home
    </button>
    <button type="button" class="btn btn-warning go-account">
      <i class="fa fa-user fa-inverse"></i> Account
    </button>
  </div></div>
</template>

<!-- /notes and /archive -->
<template name="notes">{{> editor }} {{> notelist }} {{> menu}}</template>
<template name="archive"> {{> archivedlist }} {{> menu }}</template>

<!-- Note Adder -->
<template name="noteadder">
  <div align="center">
    <input type="text" id="newNote" class="form-control" placeholder="Add new note">
  </div>
</template>

<!-- Note List (seen at /notes) -->
<template name="notelist">
  <div class="list-group">
    {{#each notelist}}
    <a href="{{pathFor 'notes'}}" class="note list-group-item">
      <span class="note-content">
        {{#if active}}<a role="button" class="edit-note">
          <i class="fa fa-pencil-square-o"></i>
        </a>{{/if}}
        <b>{{title}}</b> <span class="note-desc">{{content}}</span>
        <span class="note-date label label-{{getDate.color}}">{{getDate.msg}}</span>
      </span>
      <button type="button" class="close-note close">&times;</button>
    </a>
    {{/each}}
  </div>
  {{#if paginator.show}}
    <div align="center"><div class="btn-group paginator">
    {{#each paginator.pages}}
      <button type="button" class="btn {{pageActive}}">{{index}}</button>
    {{/each}}
  </div></div>
  {{/if}}
  {{#if empty}}
    <p class="lead" align="center">You don't have any notes, try adding a new one!</p>
  {{/if}}
  {{> noteadder }}
</template>

<!-- Archive List (seen at /archive) -->
<template name="archivedlist">
  {{#unless empty}}
    <p align="center" class="lead">This is your archive.</p>
    <p align="center">Click on a note to bring it back to the homepage.</p>
  {{/unless}}
  <div class="list-group">
    {{#each archived}}
    <a href="{{pathFor 'archive'}}" class="note list-group-item">
      <span class="note-content">
        <b>{{title}}</b> <span class="note-desc">{{content}}</span>
        <span class="note-date label label-{{getDate.color}}">{{getDate.msg}}</span>
      </span>
      <button type="button" class="close-note close archive-close-note">
      <i class="fa fa-trash-o"></i></button>
    </a>
    {{/each}}
  </div>
  {{#if paginator.show}}
    <div align="center"><div class="btn-group paginator">
    {{#each paginator.pages}}
      <button type="button" class="btn {{pageActive}}">{{index}}</button>
    {{/each}}
  </div></div>
  {{/if}}
  {{#if empty}}
    <p class="lead" align="center">Your archive is empty</p>
  {{else}}
    <div align="center" class="in-bt"><button class="btn btn-danger clear">
      <i class="fa fa-trash-o"></i> Clear</button>
    </div>
  {{/if}}
</template>

<!-- Note Editor (seen at /notes/:_id) -->
<template name="editor">
  {{#if _id}}
  <div class="panel panel-info">
    <div class="panel-heading">
      <h3 class="panel-title">
        <div align="center">
          <input type="text" class="form-control editor-title" value="{{title}}" placeholder="Title">
          <button type="button" class="close close-editor">&times;</button>
        </div>
      </h3>
    </div>
    <div align="center" class="panel-body">
      <textarea id="area" class="area form-control in-bt" rows="3" placeholder="...">{{content}}</textarea>
      <input class="form-control date" value="{{formattedDate}}" placeholder="Due Date ({{dateformat}})">
      <button type="button" class="btn btn-warning set-date">
        <i class="fa fa-clock-o"></i> Do Today</button>
      <button type="button" class="btn btn-info save-editor">
        <i class="fa fa-upload"></i> Save</button>
    </div>
  </div>
  {{/if}}
</template>

<!-- /login -->
<template name="login">
  <div align="center">
    <h3 class="cool-header"><i class="fa fa-sign-in fa-2x"></i><br>Sign In</h3>
    {{#if loading}}
      {{> loading}}
    {{else}}
      <input type="text" id="l-mail" class="form-control login in-bt" placeholder="Email">
      <input type="password" id="l-pass" class="form-control login in-bt" placeholder="Password">
    {{/if}}
    {{#unless loading}}
      <a role="button" href="{{pathFor 'register'}}" class="btn-fix btn btn-success">
        <i class="fa fa-user"></i> Sign Up</a>
      <a role="button" id="login-btn" class="btn-fix btn btn-primary">
        Log In</a>
      <a role="button" href="{{pathFor 'home'}}" class="btn-fix btn btn-warning">
        <i class="fa fa-home"></i> Home</a>
    {{/unless}}
  </div>
</template>

<!-- /register -->
<template name="register">
  <div align="center">
    <h3 class="cool-header"><i class="fa fa-user fa-2x"></i><br>New Account</h3>
    {{#if loading}}
      {{> loading}}
    {{else}}
      <p>Password must be at least 8 characters. You will need to confirm your email.</p>
      <input type="text" id="r-mail" class="form-control register in-bt" placeholder="Email">
      <input type="password" id="r-pass" class="form-control register in-bt" placeholder="Password">
      <input type="password" id="r-pass-2" class="form-control register pass-rep in-bt" placeholder="Repeat Password">
      <button type="button" id="register-btn" class="btn-fix btn btn-primary">
        <i class="fa fa-user"></i> Sign Up</button>
      <a role="button" href="{{pathFor 'home'}}" class="btn-fix btn btn-success">
        <i class="fa fa-home"></i> Home</a>
    {{/if}}
  </div>
</template>

<!-- /account -->
<template name="account">
  <div align="center">
    <h3 class="cool-header"><i class="fa fa-user fa-2x"></i><br>{{email}}</h3>
    <p class="lead">Date Format</p>
    <p>You can choose the format used to write and read dates in the note list</p>
    <input type="text" class="form-control" id="set-date-format" placeholder="Date Format" value="{{dateformat}}">
    {{#if APIAvailable}}
    <hr>
    <p class="lead">API Key</p>
    <p>If you want to be able to use our <b>RESTful API</b> or an application that uses it (such as our awesome
    <a href="https://www.npmjs.com/package/homework-cli">command line client</a>) you need to input an <b>API Key</b>
    here that will allow the programs to <u>read, write and delete all your notes</u>.</p>
    <p>you can change this key any time
    or remove it completely by leaving this field blank.</p>
    <input type="text" class="form-control" id="set-api-key" placeholder="Your API Key" value="{{apikey}}">
    {{/if}}
    <div class="btn-group">
      <button type="button" id="save-settings" class="btn btn-primary">
        <i class="fa fa-upload"></i> Save</button>
      <button type="button" id="reset-settings" class="btn btn-warning">
        <i class="fa fa-cog"></i> Reset</button>
    </div>
    {{> menu}}
    <div class="btn-group btns-account">
      <button type="button" id="btn-logout" class="btn btn-warning">
        <i class="fa fa-sign-out fa-inverse"></i> Sign Out
      </button>
      <button type="button" id="btn-delete-me" class="btn btn-danger">
        <i class="fa fa-exclamation-circle fa-inverse"></i> Delete
      </button>
    </div>
  </div>
</template>

<!-- /verify -->
<template name="verifyEmail">
  <div align="center">
    <h3 class="cool-header"><i class="fa fa-envelope fa-2x"></i><br>
      Please verify your Email Address<br><small>{{email}}</small></h3>
    <p>Click the link inside the email we sent you or paste it here:</p>
    <input type="text" id="token-field" class="form-control" placeholder="Token" value="{{token}}">
    <div align="center" class="btn-group">
      <button type="button" class="btn btn-warning btn-ver" id="btn-resend">
        <i class="fa fa-refresh"></i> Resend</button>
      <button type="button" class="btn btn-success btn-ver" id="btn-verify">
        <i class="fa fa-check"></i> Verify</button>
      <button type="button" class="btn btn-danger btn-ver" id="btn-delete">
        <i class="fa fa-trash-o"></i> Delete</button>
    </div><br>
    <button type="button" class="btn btn-primary btn-ver" id="btn-logout">
      <i class="fa fa-sign-out"></i> Sign Out</button>
  </div>
</template>

<!-- Shows the "fork me on github" ribbon -->
<template name="ribbon">
  <div class="github-fork-ribbon-wrapper right">
    <div class="github-fork-ribbon">
      <a href="http://github.com/fazo96/homework">Fork me on GitHub</a>
    </div>
  </div>
</template>

<!-- Shows a spinning gear -->
<template name="loading">
  <div align="center" class="spinning-cog">
    <i class="fa fa-cog fa-spin fa-3x"></i>
  </div>
</template>

<template name="reconnect">
  <div align="center" class="spinning-cog">
    <i class="fa fa-cog fa-spin fa-4x"></i>
    <h3>Connecting to Server
      <br><small><b>Status:</b> {{status.status}}
      {{#if status.reason}}<b>Reason:</b> {{status.reason}}{{/if}}
      {{time}}
    </small></h3>
    <!--<p>If the problem persists, try reloading the page or contact the website administrator.</p>-->
  </div>
</template>

<!-- Footer (used in 'template') -->
<template name="footer">
  <p>This app is <a href="https://en.wikipedia.org/wiki/Free_software">Free Software</a>, under the <a href="http://opensource.org/licenses/MIT">MIT License</a></p>
  <p>Built by Enrico Fasoli (v{{version}})</p>
  <div class="links">
    <a class="custom-link" href="http://www.linkedin.com/profile/view?id=292450419"><i class="fa fa-linkedin fa-2x"></i></a>
    <a href="http://twitter.com/fazo96"><i class="fa fa-twitter fa-2x footer-center-icon"></i></a>
    <a class="custom-link" href="http://github.com/fazo96"><i class="fa fa-github fa-2x"></i></a>
  </div>
</template>

<!-- 404 -->
<template name="404">
  <div align="center">
    <h1><i class="fa fa-exclamation-triangle fa-2x"></i><br>
      404<br><small>Page not found</small></h1>
    <a style="margin-top:15px" role="button" class="btn btn-success" href="{{pathFor 'home'}}">
      <i class="fa fa-home"></i> Home
    </a>
  </div>
</template>

<!-- Homepage -->
<template name="homepage">
  <div align="center"><i class="fa fa-book fa-5x"></i></div>
  <p align="center" style="margin-top: 20px" class="lead">A fast, free, organized way to manage your school tasks.</p>
  {{#if loading}}{{> loading}}{{/if}}
  <div class="row" align="center">
    <div class="col-sm-4">
      <h2><i class="fa fa-code-fork"></i> Free.
      <small>This app is not only <u>free of charge and ads</u>, it's also <b>Free Software</b>.
      Anyone can <a href="http://github.com/fazo96/homework">see the code</a> and contribute.
      </small></h2>
    </div>
    <div class="col-sm-4">
      <h2><i class="fa fa-check"></i> Simple.
      <small>Just what you need: a homework list organized by date. Nothing more, nothing less.</small></h2>
    </div>
    <div class="col-sm-4">
      <h2><i class="fa fa-bolt"></i> Modern.
      <small>Works on all modern <u>Mobile</u> and <u>Desktop</u> browsers.
      Your password is safe and <u>not</u> stored online.</small></h2></div>
  </div>
  {{#unless loading}}
  <div align="center" style="margin-top:20px;">
    {{#if twitterAvailable}}
    <a id="twitter" class="btn btn-primary">
      <i class="fa fa-twitter"></i> Log In with Twitter
    </a><br>
    {{/if}}
    {{#if facebookAvailable}}
    <a id="facebook" class="btn btn-primary">
      <i class="fa fa-facebook"></i> Log In with Facebook
    </a><br>
    {{/if}}
    <a href="{{pathFor 'login'}}" role="button" class="btn btn-primary">
      <i class="fa fa-sign-in"></i> Sign In
    </a>
    <a href="{{pathFor 'register'}}" role="button" class="btn btn-success">
      <i class="fa fa-user"></i> Sign Up
    </a>
  </div>
  {{/unless}}
</template>

<!-- Layout for all the pages -->
<template name="layout">
  <div class="container">
    <div class="page-header">
      <h1 id="title">Homework<br>
        <small>management for students</small>
      </h1>
    </div>
    {{> yield region='outside'}}
    <div class="center-block" id="ui-container">
      {{> yield}}
    </div>
    <hr>
    <div class="center-block" align="center">{{> footer}}</div>
  </div>
  {{> ribbon}}
</template>