Merge the latest version of Speedometer 2.0 to browserbench.org against at r222534.
[WebKit-https.git] / Websites / browserbench.org / Speedometer2.0 / resources / todomvc / architecture-examples / angularjs / todomvc-index.html
1 <section id="todoapp" class="todoapp">
2     <header id="header">
3         <h1>todos</h1>
4         <form id="todo-form" class="todo-form" ng-submit="addTodo()">
5             <input id="new-todo" class="new-todo" placeholder="What needs to be done?" ng-model="newTodo" ng-disabled="saving" autofocus>
6         </form>
7     </header>
8     <section id="main" class="main" ng-show="todos.length" ng-cloak>
9         <input id="toggle-all" class="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
10         <label for="toggle-all">Mark all as complete</label>
11         <ul id="todo-list" class="todo-list">
12             <li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
13                 <div class="view">
14                     <input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="toggleCompleted(todo)">
15                     <label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
16                     <button class="destroy" ng-click="removeTodo(todo)"></button>
17                 </div>
18                 <form ng-submit="saveEdits(todo, 'submit')">
19                     <input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEdits(todo)" ng-blur="saveEdits(todo, 'blur')"
20                         todo-focus="todo == editedTodo">
21                 </form>
22             </li>
23         </ul>
24     </section>
25     <footer id="footer" class="footer" ng-show="todos.length" ng-cloak>
26         <span id="todo-count" class="todo-count"><strong>{{remainingCount}}</strong>
27             <ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
28         </span>
29         <ul id="filters" class="filters">
30             <li>
31                 <a ng-class="{selected: status == ''} " href="#/">All</a>
32             </li>
33             <li>
34                 <a ng-class="{selected: status == 'active'}" href="#/active">Active</a>
35             </li>
36             <li>
37                 <a ng-class="{selected: status == 'completed'}" href="#/completed">Completed</a>
38             </li>
39         </ul>
40         <button id="clear-completed" class="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed</button>
41     </footer>
42 </section>
43 <footer id="info" class="info">
44     <p>Double-click to edit a todo</p>
45     <p>Credits:
46         <a href="https://twitter.com/cburgdorf">Christoph Burgdorf</a>,
47         <a href="http://ericbidelman.com">Eric Bidelman</a>,
48         <a href="http://jacobmumm.com">Jacob Mumm</a> and
49         <a href="http://blog.igorminar.com">Igor Minar</a>
50     </p>
51     <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
52 </footer>