index.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Todo</title>
  5. <meta charset="utf-8">
  6. <link rel="stylesheet" type="text/css" href="todomvc.css">
  7. <link rel="stylesheet" type="text/css" href="custom.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. <input
  23. id="toggle-all"
  24. type="checkbox"
  25. sd-checked="allDone"
  26. sd-on="change:toggleAll"
  27. >
  28. <ul id="todo-list">
  29. <!-- a single todo item -->
  30. <li
  31. sd-each="todo:todos"
  32. sd-class="completed:todo.done, editing:todo.editing"
  33. >
  34. <div class="view">
  35. <input
  36. class="toggle"
  37. type="checkbox"
  38. sd-checked="todo.done"
  39. sd-on="change:updateCount"
  40. >
  41. <label
  42. sd-text="todo.text"
  43. sd-on="dblclick:edit"
  44. ></label>
  45. <button class="destroy" sd-on="click:removeTodo"></button>
  46. </div>
  47. <input
  48. class="edit"
  49. type="text"
  50. sd-focus="todo.editing"
  51. sd-on="blur:stopEdit, keyup:stopEdit | key enter"
  52. sd-value="todo.text"
  53. >
  54. </li>
  55. </ul>
  56. </section>
  57. <!-- footer controls -->
  58. <footer id="footer" sd-show="total">
  59. <span id="todo-count">
  60. <strong sd-text="remaining"></strong>
  61. <span sd-text="itemLabel"></span>
  62. left
  63. </span>
  64. <ul id="filters">
  65. <li><a href="#/all" data-filter="all" sd-on="click:setFilter">All</a></li>
  66. <li><a href="#/active" data-filter="active" sd-on="click:setFilter">Active</a></li>
  67. <li><a href="#/completed" data-filter="completed" sd-on="click:setFilter">Completed</a></li>
  68. </ul>
  69. <button id="clear-completed" sd-on="click:removeCompleted">
  70. Remove Completed (<span sd-text="completed"></span>)
  71. </button>
  72. </footer>
  73. </section>
  74. <!-- info -->
  75. <footer id="info">
  76. <p>Double-click to edit a todo</p>
  77. <p>Powered by <a href="https://github.com/yyx990803/seed">Seed.js</a></p>
  78. <p>Created by <a href="http://evanyou.me">Evan You</a></p>
  79. </footer>
  80. <!-- js -->
  81. <script src="../../dist/seed.js"></script>
  82. <script src="app.js"></script>
  83. </body>
  84. </html>