Entony
/
To-do


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>To-Do</title>

	<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
		<div class="page-header">
			<h1>Todo list</h1>
		</div>

	<!-- Button trigger modal -->
	<div class="text-right">
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-window"><span class="glyphicon glyphicon-plus"></span> Add new task</button>
		<button type="button" id="remove-all" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Remove all</button>
	</div>

	<ul class="nav nav-tabs" role="tablist">
		<li class="active"><a href="#to-do" data-toggle="tab">To do</a></li>
		<li><a href="#go-go" data-toggle="tab">In progress</a></li>
		<li><a href="#completed" data-toggle="tab">Completed</a></li>
	</ul>

		<div class="tab-content" id="task-list">
			<div role="tabpanel" class="tab-pane active" id="to-do" data-status="1">
				<ul class="list-group"></ul>
			</div>

			<div role="tabpanel" class="tab-pane" id="go-go" data-status="2">
				<ul class="list-group"></ul>
			</div>

			<div role="tabpanel" class="tab-pane" id="completed" data-status="3">
				<ul class="list-group"></ul>
			</div>
		</div>

	<div class="row">
		<div class="col-sm-6 col-md-4">
			<div class="panel panel-danger">
      			<div class="panel-heading">Should be done</div>
      			<div class="panel-body">Tasks count <span id="should-be-done" class="badge">0</span></div>
    		</div>
		</div>

		<div class="col-sm-6 col-md-4">
    		<div class="panel panel-warning">
     			<div class="panel-heading">Will be come soon</div>
        		<div class="panel-body">Tasks count <span id="will-be-come-soon" class="badge">0</span></div>
    		</div>
    	</div>

		<div class="col-sm-6 col-md-4">
    		<div class="panel panel-success">
      			<div class="panel-heading">Already done</div>
      			<div class="panel-body">Tasks count <span id="already-done" class="badge">0</span></div>
    		</div>
    	</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="modal-window" tabindex="-1" role="dialog" aria-hidden="true">
	  	<div class="modal-dialog" role="document">
	    	<div class="modal-content">
	     		 <div class="modal-header">
	        			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          				<span aria-hidden="true">&times;</span>
	      	  			</button>
	       			 <h5 class="modal-title">Add new task</h5>
	     		 </div>
	     			<div class="modal-body">
	      				<form id="form-add-task">
	      					<div class="form-group">
		      					<input type="text" name="title" class="form-control" placeholder="Title">
	      					</div>
	      					<div class="form-group">
		      					<textarea name="description" class="form-control" placeholder="Description"></textarea>	
		      				</div>
	      				</form>
	      			</div>
	      		<div class="modal-footer">
	        		<button type="button" class="btn btn-danger" data-dismiss="modal">Cansel</button>
	       			<button type="submit" form="form-add-task" class="btn btn-success">Save</button>
	      		</div>
	   		</div>
	  	</div>
	</div>
</div>

	<script src="lib/jquery/dist/jquery.min.js"></script>
	<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="js/script.js"></script>
</body>
</html>