task-manager/index.html at main · Pavan755/task-manager · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Smart Task Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <!-- ======================================
         APP LAYOUT WRAPPER
    ====================================== -->

    <div class="app-layout">

        <!-- ======================================
             TASK MANAGER (MAIN PANEL)
        ====================================== -->

        <div class="container">

            <h1>Task Manager</h1>

            <!-- Incognito Toggle -->
            <button id="privacyToggle">Incognito Mode</button>

            <!-- Task Input -->
            <div class="task-input">

                <input type="text" id="taskInput" placeholder="Enter a new task">

                <select id="energyTag">
                    <option value="quick">Quick Win</option>
                    <option value="deep">Deep Work</option>
                </select>

                <button id="addTaskBtn">Add Task</button>

            </div>

            <!-- Progress Section -->
            <div class="progress-section">

                <label>Progress</label>

                <div class="progress-bar">
                    <div id="progress"></div>
                </div>

                <p id="progressText">0% complete</p>

            </div>

            <!-- Filters -->
            <div class="filters">

                <button data-filter="all">All</button>
                <button data-filter="active">Active</button>
                <button data-filter="completed">Completed</button>
                <button data-filter="quick">Quick Win</button>
                <button data-filter="deep">Deep Work</button>

            </div>

            <!-- Task List -->
            <ul id="taskList"></ul>

        </div>


        <!-- ======================================
             DASHBOARD (SIDE PANEL)
        ====================================== -->

        <div class="dashboard">

            <h2>Dashboard</h2>

            <div class="stats">

                <p>Total Tasks: <span id="totalTasks">0</span></p>
                <p>Completed: <span id="completedTasks">0</span></p>
                <p>Quick Tasks: <span id="quickTasks">0</span></p>
                <p>Deep Tasks: <span id="deepTasks">0</span></p>

            </div>

            <div class="insights">

                <h3>Insights</h3>
                <p id="insightText">No insights yet</p>

            </div>

        </div>

    </div>

    <script src="script.js"></script>

</body>

</html>