scan_run/index.html at master · suresync/scan_run · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scan Run | Delivery Board</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="site-header">
      <h1>Delivery Board</h1>
      <p>Plan work from architecture to execution.</p>
    </header>

    <main class="layout" aria-label="Task planner">
      <section class="panel form-panel" aria-labelledby="create-task-heading">
        <h2 id="create-task-heading">Create task</h2>
        <form id="task-form">
          <label for="task-title">Title</label>
          <input id="task-title" name="title" type="text" required maxlength="80" />

          <label for="task-description">Description</label>
          <textarea id="task-description" name="description" rows="4" maxlength="280"></textarea>

          <div class="row">
            <div>
              <label for="task-priority">Priority</label>
              <select id="task-priority" name="priority">
                <option value="low">Low</option>
                <option value="medium" selected>Medium</option>
                <option value="high">High</option>
              </select>
            </div>

            <div>
              <label for="task-status">Status</label>
              <select id="task-status" name="status">
                <option value="backlog" selected>Backlog</option>
                <option value="in-progress">In Progress</option>
                <option value="done">Done</option>
              </select>
            </div>
          </div>

          <button type="submit">Add task</button>
        </form>
      </section>

      <section class="panel" aria-labelledby="filter-heading">
        <h2 id="filter-heading">Filters</h2>
        <div class="filters">
          <label for="filter-status">Status</label>
          <select id="filter-status">
            <option value="all" selected>All</option>
            <option value="backlog">Backlog</option>
            <option value="in-progress">In Progress</option>
            <option value="done">Done</option>
          </select>

          <label for="filter-priority">Priority</label>
          <select id="filter-priority">
            <option value="all" selected>All</option>
            <option value="high">High</option>
            <option value="medium">Medium</option>
            <option value="low">Low</option>
          </select>

          <label for="search">Search</label>
          <input id="search" type="search" placeholder="Search title or description" />
        </div>

        <div id="stats" class="stats" aria-live="polite"></div>
      </section>

      <section class="panel" aria-labelledby="board-heading">
        <div class="board-header">
          <h2 id="board-heading">Board</h2>
          <button id="clear-completed" class="secondary">Clear completed</button>
        </div>
        <ul id="task-list" class="task-list" aria-label="Task list"></ul>
      </section>
    </main>

    <template id="task-template">
      <li class="task-item">
        <article>
          <header>
            <h3 class="task-title"></h3>
            <span class="badge task-priority"></span>
          </header>
          <p class="task-description"></p>
          <div class="meta">
            <label>
              Status
              <select class="task-status-select">
                <option value="backlog">Backlog</option>
                <option value="in-progress">In Progress</option>
                <option value="done">Done</option>
              </select>
            </label>
            <div class="actions">
              <button class="secondary edit-btn" type="button">Edit</button>
              <button class="danger delete-btn" type="button">Delete</button>
            </div>
          </div>
        </article>
      </li>
    </template>

    <script src="app.js" defer></script>
  </body>
</html>