TASKr/dashboard.html at main · maxd0328/TASKr · 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="dashboard.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <div id="dashboard-frame-outer">
            <img src="TASKr.png" alt="TASKr" width="180" height="150">
            <div id="dashboard-frame-inner">
                <p class="header-0">Welcome back, User!</p>
                <p class="header-1">Your Progress</p>
                <div class="progress-bar" style="margin: 5px 0px 0px 0px; width: 90%; display: inline-block;">
                    <div class="progress-filler" style="width: 32%"></div>
                </div>
                <p id="percentage-text">32%</p>

                <div class="container-light-gray" style="margin: 10px 0px 0px 0px">
                    <p class="header-2" style="margin: 0px 0px 10px 0px">Quick Access</p>
                    <div id="quick-access-box">
                        <div class="container-dark-gray quick-access-goal">
                            <p class="header-3"><b>Complete 10 Push-Ups</b></p>
                            <p class="header-3">Daily</p>
                            <div class="progress-bar" style="margin: 10px 0px 0px 0px">
                                <div class="progress-filler" style="width: 50%"></div>
                            </div>
                            <div class="progress-bar" style="margin: 10px 0px 20px 0px">
                                <div class="progress-filler" style="width: 20%"></div>
                            </div>
                            <input class="input" type="number" min="0" style="width: 30%; display: inline-block;" value="2">
                            <p class="header-2" style="display: inline-block; margin: 0px 0px 0px 10px;">out of 10</p>
                        </div>
                        <div class="container-dark-gray quick-access-goal">
                            <p class="header-3"><b>Exfoliate Skin</b></p>
                            <p class="header-3">Weekly</p>
                            <div class="progress-bar" style="margin: 10px 0px 0px 0px">
                                <div class="progress-filler" style="width: 90%"></div>
                            </div>
                            <div class="progress-bar" style="margin: 10px 0px 20px 0px">
                                <div class="progress-filler" style="width: 0%"></div>
                            </div>
                            <div style="width: 96px; height: 32px; margin: auto;">
                                <p class="header-3" style="display:inline-block; position: relative; top: -12px">Complete</p>
                                <input class="checkbox" type="button" style="margin: 0px 0px 0px 5px; display: inline-block">
                            </div>
                        </div>
                        <div class="container-dark-gray quick-access-goal">
                            <p class="header-3"><b>Study 2 Hours</b></p>
                            <p class="header-3">Daily</p>
                            <div class="progress-bar" style="margin: 10px 0px 0px 0px">
                                <div class="progress-filler" style="width: 11%"></div>
                            </div>
                            <div class="progress-bar" style="margin: 10px 0px 20px 0px">
                                <div class="progress-filler" style="width: 50%"></div>
                            </div>
                            <input class="input" type="number" min="0" style="width: 30%; display: inline-block;" value="1">
                            <p class="header-2" style="display: inline-block; margin: 0px 0px 0px 10px;">out of 2</p>
                        </div>
                        <div class="container-dark-gray quick-access-goal">
                            <p class="header-3"><b>Complete 20 Sit-Ups</b></p>
                            <p class="header-3">Daily</p>
                            <div class="progress-bar" style="margin: 10px 0px 0px 0px">
                                <div class="progress-filler" style="width: 70%"></div>
                            </div>
                            <div class="progress-bar" style="margin: 10px 0px 20px 0px">
                                <div class="progress-filler" style="width: 40%"></div>
                            </div>
                            <input class="input" type="number" min="0" style="width: 30%; display: inline-block;" value="8">
                            <p class="header-2" style="display: inline-block; margin: 0px 0px 0px 10px;">out of 20</p>
                        </div>
                    </div>
                </div>

                <div class="container-light-gray" style="margin: 20px 0px 0px 0px">
                    <p class="header-2" style="margin: 0px 0px 10px 0px">Your Goals</p>
                    <div class="container-dark-gray" style="margin: 0px 0px 30px 0px">
                        <p class="header-3" style="font-size: 18px"><b>2 Month Workout Goal</b></p>
                        <p class="header-3">14/1/2023 - 14/3/2023</p>
                        <div class="progress-bar" style="margin: 10px 0px 0px 0px">
                            <div class="progress-filler" style="width: 55%"></div>
                        </div>
                        <div class="container-light-gray column-holder" style="margin: 10px 0px 0px 0px">
                            <div style="width: 60%; float:left">
                                <p class="header-3" style="text-align: left"><b>Complete 10 Push-Ups</b></p>
                                <p class="header-3" style="text-align: left">Daily</p>
                                <div class="progress-bar-dark" style="margin: 20px 0px 0px 0px">
                                    <div class="progress-filler" style="width: 50%"></div>
                                </div>
                                <div class="progress-bar-dark" style="margin: 10px 0px 0px 0px">
                                    <div class="progress-filler" style="width: 20%"></div>
                                </div>
                            </div>
                            <div style="width: 32%; float:right;">
                                <input class="input" type="number" min="0" style="width: 30%; display: inline-block;" value="2">
                                <p class="header-2" style="display: inline-block; margin: 0px 0px 0px 10px;">out of 10</p>
                                <button class="blue-button" style="width: 100%; margin: 15px 0px 0px 0px">View History</button>
                            </div>
                        </div>
                        <div class="container-light-gray column-holder" style="margin: 10px 0px 0px 0px">
                            <div style="width: 60%; float:left">
                                <p class="header-3" style="text-align: left"><b>Complete 20 Sit-Ups</b></p>
                                <p class="header-3" style="text-align: left">Daily</p>
                                <div class="progress-bar-dark" style="margin: 20px 0px 0px 0px">
                                    <div class="progress-filler" style="width: 70%"></div>
                                </div>
                                <div class="progress-bar-dark" style="margin: 10px 0px 0px 0px">
                                    <div class="progress-filler" style="width: 40%"></div>
                                </div>
                            </div>
                            <div style="width: 32%; float:right;">
                                <input class="input" type="number" min="0" style="width: 30%; display: inline-block;" value="8">
                                <p class="header-2" style="display: inline-block; margin: 0px 0px 0px 10px;">out of 20</p>
                                <button class="blue-button" style="width: 100%; margin: 15px 0px 0px 0px">View History</button>
                            </div>
                        </div>
                        <button class="blue-button" style="width: 33%; margin: 10px 0px 0px 0px">Edit Goal</button>
                        <button class="blue-button" style="background-color: #DB4D4D; width: 33%; margin: 10px 0px 0px 0px">
                            Delete Goal</button>
                    </div>

                    <div class="container-dark-gray" style="margin: 0px 0px 30px 0px">
                        <p class="header-3" style="font-size: 18px"><b>Skin Care Goal</b></p>
                        <p class="header-3">14/1/2023 - 17/4/2023</p>
                        <div class="progress-bar" style="margin: 10px 0px 0px 0px">
                            <div class="progress-filler" style="width: 90%"></div>
                        </div>
                        <div class="container-light-gray column-holder" style="margin: 10px 0px 0px 0px">
                            <div style="width: 60%; float:left">
                                <p class="header-3" style="text-align: left"><b>Exfoliate Skin</b></p>
                                <p class="header-3" style="text-align: left">Weekly</p>
                                <div class="progress-bar-dark" style="margin: 20px 0px 0px 0px">
                                    <div class="progress-filler" style="width: 90%"></div>
                                </div>
                                <div class="progress-bar-dark" style="margin: 10px 0px 0px 0px">
                                    <div class="progress-filler" style="width: 0%"></div>
                                </div>
                            </div>
                            <div style="width: 32%; float:right;">
                                <div style="width: 96px; height: 32px; margin: 0;">
                                    <input class="checkbox" type="button" style="margin: 0px 0px 0px 5px; display: inline-block">
                                </div>
                                <button class="blue-button" style="width: 100%; margin: 15px 0px 0px 0px">View History</button>
                            </div>
                        </div>
                        <button class="blue-button" style="width: 33%; margin: 10px 0px 0px 0px">Edit Goal</button>
                        <button class="blue-button" style="background-color: #DB4D4D; width: 33%; margin: 10px 0px 0px 0px">
                            Delete Goal</button>
                    </div>

                    <div class="container-dark-gray" style="margin: 0px 0px 30px 0px">
                        <p class="header-3" style="font-size: 18px"><b>Study Goal</b></p>
                        <p class="header-3">9/1/2023 - 30/6/2023</p>
                        <div class="progress-bar" style="margin: 10px 0px 0px 0px">
                            <div class="progress-filler" style="width: 11%"></div>
                        </div>
                        <div class="container-light-gray column-holder" style="margin: 10px 0px 0px 0px">
                            <div style="width: 60%; float:left">
                                <p class="header-3" style="text-align: left"><b>Study 2 Hours</b></p>
                                <p class="header-3" style="text-align: left">Daily</p>
                                <div class="progress-bar-dark" style="margin: 20px 0px 0px 0px">
                                    <div class="progress-filler" style="width: 11%"></div>
                                </div>
                                <div class="progress-bar-dark" style="margin: 10px 0px 0px 0px">
                                    <div class="progress-filler" style="width: 50%"></div>
                                </div>
                            </div>
                            <div style="width: 32%; float:right;">
                                <input class="input" type="number" min="0" style="width: 30%; display: inline-block;" value="1">
                                <p class="header-2" style="display: inline-block; margin: 0px 0px 0px 10px;">out of 2</p>
                                <button class="blue-button" style="width: 100%; margin: 15px 0px 0px 0px">View History</button>
                            </div>
                        </div>
                        <button class="blue-button" style="width: 33%; margin: 10px 0px 0px 0px">Edit Goal</button>
                        <button class="blue-button" style="background-color: #DB4D4D; width: 33%; margin: 10px 0px 0px 0px">
                            Delete Goal</button>
                    </div>

                    <div style="width: 35%; margin: auto">
                        <a href="addgoals.html">
                            <button class="blue-button" style="width: 100%; margin: auto">Create New Goal</button>
                        </a>
                    </div>
                </div>
                <div style="width: 22%; margin: auto">
                    <img src="TASKr.png" alt="TASKr" width="100%" height="125">
                    <p class="header-3">All Rights Reserved</p>
                </div>
            </div>
        </div>
    </body>
</html>