index.html 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Todo</title>
  5. <meta charset="utf-8">
  6. <link rel="stylesheet" type="text/css" href="common/base.css">
  7. <link rel="stylesheet" type="text/css" href="css/app.css">
  8. </head>
  9. <body>
  10. <section id="todoapp" sd-controller="Todos" sd-class="filter">
  11. <header id="header">
  12. <h1>todos</h1>
  13. <!-- main input box -->
  14. <input
  15. id="new-todo"
  16. autofocus
  17. sd-on="keyup:addTodo | key enter"
  18. placeholder="What needs to be done?"
  19. >
  20. </header>
  21. <section id="main" sd-show="total">
  22. <!-- toggle all checkbox-->
  23. <input
  24. id="toggle-all"
  25. type="checkbox"
  26. sd-checked="allDone"
  27. >
  28. <ul id="todo-list">
  29. <!-- a single todo item -->
  30. <li
  31. class="todo"
  32. sd-each="todo:todos"
  33. sd-class="completed:todo.completed, editing:todo.editing"
  34. >
  35. <div class="view">
  36. <input
  37. class="toggle"
  38. type="checkbox"
  39. sd-checked="todo.completed"
  40. sd-on="change:updateCount"
  41. >
  42. <label sd-text="todo.title" sd-on="dblclick:edit"></label>
  43. <button class="destroy" sd-on="click:removeTodo"></button>
  44. </div>
  45. <input
  46. class="edit"
  47. type="text"
  48. sd-focus="todo.editing"
  49. sd-on="blur:stopEdit, keyup:stopEdit | key enter"
  50. sd-value="todo.title"
  51. >
  52. </li>
  53. </ul>
  54. </section>
  55. <!-- footer controls -->
  56. <footer id="footer" sd-show="total">
  57. <span id="todo-count">
  58. <strong sd-text="remaining"></strong> {{itemLabel}} left
  59. </span>
  60. <ul id="filters">
  61. <li><a href="#/all">All</a></li>
  62. <li><a href="#/active">Active</a></li>
  63. <li><a href="#/completed">Completed</a></li>
  64. </ul>
  65. <button id="clear-completed" sd-on="click:removeCompleted" sd-show="completed">
  66. Remove Completed ({{completed}})
  67. </button>
  68. </footer>
  69. </section>
  70. <!-- info -->
  71. <footer id="info">
  72. <p>Double-click to edit a todo</p>
  73. <p>Powered by <a href="https://github.com/yyx990803/seed">Seed.js</a></p>
  74. <p>Created by <a href="http://evanyou.me">Evan You</a></p>
  75. </footer>
  76. <!-- js -->
  77. <script src="../../dist/seed.js"></script>
  78. <script src="js/app.js"></script>
  79. </body>
  80. </html>