<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=380">
    <script src="scripts/todo.js"></script>
	<title>To-do list with Notifications</title>
	<!-- Icon originated from design by Sabine Wollender: http://thenounproject.com/wosamo/ -->
	<link rel="icon" type="image/png" href="img/icon-128.png">
    <link href='https://fonts.googleapis.com/css?family=Donegal+One|Lily+Script+One' rel='stylesheet' type='text/css'>
	<link href="style/style.css" type="text/css" rel="stylesheet">
</head>
<body>

<h1>To-do list</h1>

<div class="task-box">

<ul id="task-list">

</ul>

</div>

<div class="form-box">
<h2>Add new to-do item.</h2>

<form id="task-form" action="index.html">
  <div class="full-width"><label for="title">Task title:</label><input type="text" id="title" required></div>
  <div class="half-width"><label for="deadline-hours">Hours (hh):</label><input type="number" id="deadline-hours" required></div>
  <div class="half-width"><label for="deadline-minutes">Mins (mm):</label><input type="number" id="deadline-minutes" required></div>
  <div class="third-width"><label for="deadline-day">Day:</label>
        <select id="deadline-day" required>
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select></div>

  <div class="third-width"><label for="deadline-month">Month:</label>
       <select id="deadline-month" required>
         <option value="January">January</option>
         <option value="February">February</option>
         <option value="March">March</option>
         <option value="April">April</option>
         <option value="May">May</option>
         <option value="June">June</option>
         <option value="July">July</option>
         <option value="August">August</option>
         <option value="September">September</option>
         <option value="October">October</option>
         <option value="November">November</option>
         <option value="December">December</option>
       </select></div>

  <div class="third-width"><label for="deadline-year">Year:</label>
       <select id="deadline-year" required>
	 <option value="2025">2025</option>
         <option value="2024">2024</option>
         <option value="2023">2023</option>
         <option value="2022">2022</option>
         <option value="2021">2021</option>
         <option value="2020">2020</option>
         <option value="2019">2019</option>
         <option value="2018">2018</option>
       </select></div>

  <div><input type="submit" id="submit" value="Add Task"></div>
  <div></div>
</form>
</div>

<div id="toolbar">
  <ul id="notifications">

  </ul>

  <button id="enable">
    Enable notifications
  </button>
</div>

</body>
</html>
