To_Do_List/index.html at main · MasterXCoder/To_Do_List · 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
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TaskMaster - Stay organized</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
  </head>

  <body class="light-mode">
    <nav class="navbar">
      <div class="navbar-branding">
        <div class="logo-container">
          <div class="check-icon">✓</div>
        </div>
        <h1 class="navbar-title">TaskMaster</h1>
      </div>
      <div class="theme-container">
        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark/light mode">
          <span class="moon">🌙</span>
          <span class="sun">☀️</span>
        </button>
        <div class="user-logo" id="user-logo">👤</div>
      </div>
    </nav>

    <div class="app-tagline">
      <p>Stay organized and boost your productivity</p>
    </div>

    <div class="stats-bar">
      <div class="stat-item">
        <span class="stat-icon">📋</span>
        <span id="total-count">0</span> tasks
      </div>
      <div class="stat-item">
        <span class="stat-icon">✓</span>
        <span id="completed-count">0</span> completed
      </div>
      <div class="stat-item">
        <span class="stat-icon">⏳</span>
        <span id="pending-count">0</span> pending
      </div>
    </div>

    <div class="container">
      <div id="signup-container" class="section signup-container">
          <h2>Sign Up</h2>
          <input type="text" id="signup-username" placeholder="Username">
          <input type="password" id="signup-password" placeholder="Password">
          <button onclick="signup()">Sign Up</button>
          <p>Already have an account? <a href="#" onclick="moveToSignin()">Sign In</a></p>
      </div>

      <div id="signin-container" class="section signin-container">
          <h2>Sign In</h2>
          <input type="text" id="signin-username" placeholder="Username">
          <input type="password" id="signin-password" placeholder="Password">
          <button onclick="signin()">Sign In</button>
          <p>Don't have an account? <a href="#" onclick="moveToSignup()">Sign Up</a></p>
      </div>

      <div id="todos-container" class="section todos-container">
          <div class="add-todo-container">
            <input type="text" id="input" placeholder="Add a new task...">
            <div class="task-actions">
              <div class="priority-dropdown">
                <button id="priority-btn">Priority <span class="dropdown-arrow">▼</span></button>
                <div id="priority-menu" class="priority-menu">
                  <div class="priority-option" data-priority="high">High Priority</div>
                  <div class="priority-option" data-priority="medium">Medium Priority</div>
                  <div class="priority-option" data-priority="low">Low Priority</div>
                </div>
              </div>
              <button id="add-todo-btn" onclick="addTodo()">Add Task</button>
            </div>
          </div>

          <div class="filter-tabs">
            <button class="filter-tab active" data-filter="all">All</button>
            <button class="filter-tab" data-filter="pending">Pending</button>
            <button class="filter-tab" data-filter="completed">Completed</button>
            <button class="filter-tab" data-filter="high">High Priority</button>
            <button class="filter-tab" data-filter="medium">Medium Priority</button>
            <button class="filter-tab" data-filter="low">Low Priority</button>
          </div>

          <div id="todos-list" class="todos-list">
            <!-- Tasks will be added here dynamically -->
            <div class="empty-state">
              <div class="empty-icon">📋</div>
              <p>No tasks found</p>
            </div>
          </div>

          <div class="todos-footer">
            <p>Your tasks are saved locally and will not be lost when you close this page.</p>
            <button id="clear-all-btn" class="clear-all-btn">Clear All Tasks</button>
          </div>
      </div>
    </div>

    <div class="user-menu" id="user-menu">
      <div class="user-info">
        <div class="user-avatar">👤</div>
        <div class="user-details">
          <p id="user-name">User</p>
        </div>
      </div>
      <div class="menu-separator"></div>
      <div class="menu-item" onclick="logout()">Logout</div>
    </div>

    <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
    <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>