Taskly/index.html at main · Ralware/Taskly · 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
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Taskly</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body class="main">
    <aside class="sidebar">
      <a href="#dashboard" class="nav-link"
        ><span class="link-icon"><img src="assets/layout-dashboard.svg" /></span
        ><span class="link-label">Dashboard</span></a
      >
      <a href="#tasks" class="nav-link"
        ><span class="link-icon"><img src="assets/sun.svg" /></span
        ><span class="link-label">Today's Tasks</span></a
      >
      <a href="#all-tasks" class="nav-link"
        ><span class="link-icon"><img src="assets/list-todo.svg" /></span
        ><span class="link-label">All Tasks</span></a
      >
      <a href="#completed" class="nav-link"
        ><span class="link-icon"><img src="assets/circle-check.svg" /></span
        ><span class="link-label">Completed</span></a
      >
      <a href="#categories" class="nav-link"
        ><span class="link-icon"><img src="assets/folder-kanban.svg" /></span
        ><span class="link-label">Categories</span></a
      >
      <a href="#calendar" class="nav-link"
        ><span class="link-icon"><img src="assets/calendar-days.svg" /></span
        ><span class="link-label">Calendar</span></a
      >
      <a href="#statistics" class="nav-link"
        ><span class="link-icon"><img src="assets/chart-column.svg" /></span
        ><span class="link-label">Statistics</span></a
      >
      <a href="#notes" class="nav-link"
        ><span class="link-icon"><img src="assets/sticky-note.svg" /></span
        ><span class="link-label">Notes</span></a
      >
      <a href="#projects" class="nav-link"
        ><span class="link-icon"><img src="assets/layers.svg" /></span
        ><span class="link-label">Projects</span></a
      >
      <a href="#settings" class="nav-link"
        ><span class="link-icon"><img src="assets/settings.svg" /></span
        ><span class="link-label">Settings</span></a
      >
    </aside>
    <main class="content">
      <header class="header">
        <div class="heading">
          <div class="title">Command Center</div>
          <div class="title-description">
            Your daily operating view — focus on what moves the needle today.
          </div>
        </div>
        <button class="new-task">
          <img src="assets/plus.svg" alt="" />
          <span>New Task</span>
        </button>
      </header>
      <div class="cards">
        <div class="each-card">
          <span class="card-title">TOTAL TASKS</span>
          <span class="card-stat">24</span>
        </div>

        <div class="each-card" style="--accent: var(--info-color)">
          <span class="card-title">PENDING</span>
          <span class="card-stat">12</span>
        </div>

        <div class="each-card" style="--accent: var(--success-color)">
          <span class="card-title">COMPLETED</span>
          <span class="card-stat">8</span>
        </div>

        <div class="each-card" style="--accent: var(--warning-color)">
          <span class="card-title">DUE TODAY</span>
          <span class="card-stat">4</span>
        </div>
        <div class="each-card" style="--accent: var(--danger-color)">
          <span class="card-title">OVER DUE</span>
          <span class="card-stat">1</span>
        </div>

        <div class="each-card">
          <span class="card-title">UPCOMING</span>
          <span class="card-stat">2</span>
        </div>

        <div class="each-card">
          <span class="card-title">PRODUCTIVITY</span>
          <span class="card-stat">96%</span>
        </div>
      </div>
    </main>
  </body>
</html>