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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaskTimer</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./layout.css">
    <script src="./script.js" defer></script>
</head>

<body class="container">

    <div class="page-content container">
        <header>

            <!-- Navigation Bar -->
            <nav class="nav-bar container item">
                <!-- Logo -->
                <div class="tasktimer-logo container item">
                    <img class="logo-img item" src="" alt="">
                    <h1 class="logo-text item">TaskTimer</h1>
                </div>
                <!-- Navigation Links -->
                <div class="nav-links item">
                    <ul class="nav-links-list container">
                        <li class="nav-link item"><a href="#add-task-section">Add Task</a></li>
                        <li class="nav-link item"><a href="#task-list-section">Task List</a></li>
                        <li class="nav-link item"><a href="#task-done-section">Task Done</a></li>
                    </ul>
                </div>
            </nav>
        </header>

        <!-- Task Timer Features -->
        <main class="task-timer-features container">
            <!-- Add Task Section -->
            <section id="add-task-section" class="add-task-section container item">
                <h2 class="section-title item">Add Task</h2>
                <form class="add-task-form container item">
                    <!-- Task Name and Duration -->
                    <div class="task-name-duration container">
                        <!-- Task Name -->
                        <div class="container item input-container task-name-container">
                            <label for="#task-title" class="item">Task Name</label>
                            <input id="task-title" type="text" class="task-input item" placeholder="Enter task name" required>
                        </div>
                        <!-- Duration -->
                        <div class="container item input-container task-duration-container">
                            <label for="#task-duration" class="item">Duration</label>
                            <input id="task-duration" type="number" class="task-duration-input item" placeholder="Enter in minutes"
                                required>
                        </div>
                    </div>
                    <!-- Task Description -->
                    <div class="container item input-container">
                        <label for="#task-desc" class="item">Task Description</label>
                        <textarea id="task-desc" class="task-desc-input item" placeholder="Enter task description" rows="5"
                            required></textarea>
                    </div>
                    <!-- Task Add Sumbit Button -->
                    <button type="submit" class="add-task-btn btn item">Add Task</button>
                </form>
            </section>

            <section class="in-progress-section hidden container">
                <h2 class="section-title">Task In Progress</h2>
                <div class="task-in-progress container">
                    <h3 class="in-progress-title">Title</h3>
                    <span class="open-btn btn">Open Timer</span>
                </div>
            </section>

            <!-- Task List Section -->
            <section id="task-list-section" class="task-list-section container item">
                <h2 class="section-title item">Task List</h2>
                <ul class="task-list container item">
                    <!-- Task Items will be dynamically added here -->
                     <p class="empty-task-list">No task added yet.</p>
                </ul>
            </section>

            <!-- Task Done List Section -->
            <section id="task-done-section" class="task-done-section container item">
                <h2 class="section-title item">Task Done</h2>
                <ul class="task-done-list container item">
                    <!-- Task Items will be dynamically added here -->
                     <p class="empty-task-list">No task done added yet.</p>
                </ul>
            </section>

        </main>
    </div>

    <div class="timer hidden container">
        <h2 class="section-title">Task In Progress</h2>
        <div class="title-and-btn container">
            <h2 class="task-list-title task-title">Title</h2>
            <div class="close-btn btn">Close</div>
        </div>
        <div class="task-desc-container">
            <p class="task-list-desc task-desc">Task Description</p>
        </div>
        <div class="timer-container container">
            <div class="pause-btn btn">Pause</div>
            <div class="task-list-duration task-duration">
                <span class="hours">00</span>:<span class="minutes">00</span>:<span class="seconds">00</span>
            </div>
        </div>
    </div>

    <footer>
        <p class="footer-text">&copy; Cedrex Pelagio. All rights reserved.</p>
    </footer>

</body>

</html>