Productivity_Dashboard/index.html at mani · manjaycoder/Productivity_Dashboard · 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Productivity Dashboard</title>
    <link rel="shortcut icon" href="./fav/android-chrome-512x512.png" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="main">
        <nav>
            <div class="nav-in">
                <h2>Productivity DashBoard</h2>
            <div class="theme">
                <h4>Change theme</h4>
            </div>
            </div>
        </nav>
        <section class="allElems">
            <header>
                <div class="header1">
                    <h2>20 April 2025</h2>
                    <h1>Saturday, 1:00 pm</h1>
                    <h4>Bhopal (MP)</h4>
                </div>

                <div class="header2">
                    <h2>20°C</h2>
                    <h4>Light rain</h4>
                    <h3 class="precipitation">Precipitation: 35%</h3>
                    <h3 class="humidity">Humidity: 49%</h3>
                    <h3 class="wind">Wind: 10 km/h</h3>

                </div>
            </header>
            <div class="allFeatures">
                <div class="todo elem" id="0">
                    <img src="https://plus.unsplash.com/premium_photo-1710962184909-f9f8dc2c9f5f?q=80&w=3987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
                    <h2>To Do List</h2>
                </div>
                <div class="daily elem" id="1">
                    <img src="https://images.unsplash.com/photo-1677249490921-3246e81f19e3?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
                    <h2>Daily Planner</h2>
                </div>
                <div class="moti elem" id="2">
                    <img src="https://images.unsplash.com/photo-1678986718987-76f0b9357e0f?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
                    <h2>Motivation</h2>
                </div>
                <div class="pomo elem" id="3">
                    <img src="https://images.unsplash.com/photo-1648457259767-e3a7fea65a99?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
                    <h2>Pomodoro Timer</h2>
                </div>
                <div class="goals elem" id="4">
                    <img src="https://images.unsplash.com/photo-1718202248232-0cdbc15d29b2?q=80&w=3928&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        alt="">
                    <h2>Daily Goals</h2>
                </div>
            </div>
        </section>

        <section class="fullElem todo-list-fullpage">
            <button class="back" id="0">Close</button>
            <h2>Your Personalised Task List</h2>
            <div class="todo-container">
                <div class="addTask">
                    <form>
                        <input id="task-input" type="text" placeholder="Enter Task">
                        <textarea placeholder="Enter Details" name="" id="" cols="30" rows="10"></textarea>
                        <div class="mark-imp">
                            <input type="checkbox" name="" id="check">
                            <label for="check">Mark as Important!</label>
                        </div>
                        <button>Add Task</button>
                    </form>
                </div>
                <div class="allTask">


                </div>
            </div>
        </section>
        <section class="fullElem daily-planner-fullpage">
            <button class="back" id="1">Close</button>
            <h2>Plan your Day to be more Productive</h2>

            <div class="day-planner">


            </div>

        </section>
        <section class="fullElem motivational-fullpage">
            <button class="back" id="2">Close</button>
            <div class="motivation-fullPage-container">
                <div class="motivation-container">
                    <div class="motivation-wrapper">
                        <img src="./icons8-quote-100.png" alt="">
                        <div class="motivation-1">
                            <h2>Quote of the Day</h2>
                        </div>
                        <div class="motivation-2">
                            <h1></h1>
                        </div>
                        <div class="motivation-3">
                            <h2></h2>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="fullElem pomodoro-fullpage">
            <button class="back" id="3">Close</button>
            <h2>Study with me!</h2>

            <h4 class="session">Work Session</h4>
            <div class="pomo-timer">
                <h1>25:00</h1>
                <button class="start-timer">Start</button>
                <button class="pause-timer">Pause</button>
                <button class="reset-timer">Reset</button>
            </div>
        </section>
        <section class="fullElem daily-goals-fullpage">
            <button class="back" id="4">Close</button>
            <h1>Daily Goals</h1>
        </section>


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

</html>