index.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>To-Do</title>
  7. <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
  8. <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="css/style.css">
  10. </head>
  11. <body>
  12. <div class="container">
  13. <div class="page-header">
  14. <h1>Todo list</h1>
  15. </div>
  16. <!-- Button trigger modal -->
  17. <div class="text-right">
  18. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-window"><span class="glyphicon glyphicon-plus"></span>Add new task</button>
  19. </div>
  20. <ul class="nav nav-tabs" role="tablist">
  21. <li class="active"><a href="#to-do" data-toggle="tab">To do</a></li>
  22. <li><a href="#go-go" data-toggle="tab">In progress</a></li>
  23. <li><a href="#completed" data-toggle="tab">Completed</a></li>
  24. </ul>
  25. <div class="tab-content" id="task-list">
  26. <div role="tabpanel" class="tab-pane active" id="to-do" data-status="1">
  27. <ul class="list-group"></ul>
  28. </div>
  29. <div role="tabpanel" class="tab-pane" id="go-go" data-status="2">
  30. <ul class="list-group"></ul>
  31. </div>
  32. <div role="tabpanel" class="tab-pane" id="completed" data-status="3">
  33. <ul class="list-group"></ul>
  34. </div>
  35. </div>
  36. <!-- Modal -->
  37. <div class="modal fade" id="modal-window" tabindex="-1" role="dialog" aria-hidden="true">
  38. <div class="modal-dialog" role="document">
  39. <div class="modal-content">
  40. <div class="modal-header">
  41. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  42. <span aria-hidden="true">&times;</span>
  43. </button>
  44. <h5 class="modal-title">Add new task</h5>
  45. </div>
  46. <div class="modal-body">
  47. <form id="form-add-task">
  48. <div class="form-group">
  49. <input type="text" name="title" class="form-control" placeholder="Title">
  50. </div>
  51. <div class="form-group">
  52. <textarea name="description" class="form-control" placeholder="Description"></textarea>
  53. </div>
  54. </form>
  55. </div>
  56. <div class="modal-footer">
  57. <button type="button" class="btn btn-danger" data-dismiss="modal">Cansel</button>
  58. <button type="submit" form="form-add-task" class="btn btn-success">Save</button>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <script src="lib/jquery/dist/jquery.min.js"></script>
  65. <script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
  66. <script src="js/script.js"></script>
  67. </body>
  68. </html>