forked from ViniTkL/TAP-RAD-TODO-LIST
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (123 loc) · 7.06 KB
/
index.html
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
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UpTodo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="./styles/styleMain.css">
<link rel="stylesheet" href="./styles/styleAddTask.css">
<link rel="stylesheet" href="./styles/stylePriority.css">
<link rel="stylesheet" href="./styles/styleCategoria.css">
<link rel="stylesheet" href="./styles/styleTasks.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
</head>
<body>
<main class="main color-background d-flex flex-column justify-content-between w-100 h-100">
<!-- cabeçalho -->
<header class="header navbar">
<div class="container-fluid px-4">
<div id="icon-header">
<a href="#">
<i class="bi bi-list text-white"></i>
</a>
</div>
<p class="p-subtitle text-white mt-2 lh-1">Index</p>
<div id="img-profile">
<img width="42" height="42" class="img-profile rounded-circle" src="https://s3-alpha-sig.figma.com/img/8649/b57f/1f921ffe66f4088d202707dba69b7504?Expires=1713139200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=WUhX~v8rUW3ZiwxIyyGxxU8x32q9ohJTmhgXuvpefcCPYWEuBBV96gCcdNsMHWqrAcjv8yg7zyDegmAHvHuvH749W09W6k6M~ZVWrLDEah097we713saBNlKxStXM0Ec4AVsRaztA6x2Sa657km~jNviA4Jg-kWi8BkRgNnD6-li-KM88zo9RxtCD-91kEyqmmHSZVN34SW8B4Lnbo9RjTN5UHXflS4w0MB7bBbH-wD16FO0vLiX0kELVd-WLQjSGqDZDxBqLUFId0oP9GE41AtbVAbdg385oq-w4yEjlbN4k29LEodYJCP7lpLxUVpcMiaLmSrr5TUO19gNMfYLXA__" alt="imagem-profile">
</div>
</div>
</header>
<!-- informações do meio -->
<section id="info-meio" class="info-meio text-white flex-column align-items-center">
<img width="227px" height="227px" src="./assets/Checklist-rafiki 1-1.png" alt="">
<p class="p-subtitle lh-base" >What do you want to do today ?</p>
<p>Tap + to add your tasks</p>
</section>
<section id="tasks-criadas" class="info-meio tasks">
<div class="search-bar">
<i class="bi bi-search"></i>
<input type="text" placeholder="search for your task...">
</div>
<div class="toDo-list">
</div>
<div class="toDo-list-done">
<div class="toDo-day">
<p>
Completados
<i class="bi bi-chevron-compact-down"></i>
</p>
</div>
</div>
</section>
<div id="priority-container" class="align-items-center justify-content-center">
</div>
<div id="choose-categorie-container" class="align-items-center justify-content-center categorie-empty vazio">
<section id="choose-category" class="container d-flex flex-column rounded-1">
<div class="title-choose-category d-flex align-items-center justify-content-center w-100 text-center mb-3">
<p class="text-white">Choose Category</p>
</div>
<div id="categorys" class="categorys d-flex flex-wrap justify-content-start gap-4" >
</div>
<div class="add-category mt-2">
<button id="btn-add-category" class="btn btn-primary w-100" style="height: 48px;">Add Category</button>
</div>
</section>
</div>
<div id="categorie-container" class="align-items-center justify-content-center categorie-empty ">
</div>
<div id="task" class="align-items-center justify-content-center">
</div>
<!--Menu final (footer) -->
<nav class="w-100" style="height: 124px;">
<div class="bottom-navigation color-navigation w-100 d-flex justify-content-between align-items-center px-3 pb-1 position-absolute" style="height: 100px; bottom:0;">
<div class="icon d-flex flex-column justify-content-center align-items-center pt-1">
<a href="#">
<i id="icon-house" class="bi bi-house-fill text-white"></i>
</a>
<p class="p-subtitle-nav text-white">Index</p>
</div>
<div class="icon d-flex flex-column justify-content-center align-items-center pt-1">
<a href="#">
<i id="icon-calendar" class="bi bi-calendar text-white"></i>
</a>
<p class="p-subtitle-nav text-white">Calendar</p>
</div>
<button type="button" id="icon-plus" class="btn rounded-circle position-relative d-flex justify-content-center align-items-center color-blue">
<i class="bi bi-plus-lg text-white" style="font-size: 22px;"></i>
</button>
<div class="icon d-flex flex-column justify-content-center align-items-center pt-1">
<a href="#">
<i id="icon-clock" class="bi bi-clock text-white"></i>
</a>
<p class="p-subtitle-nav text-white">Focuse</p>
</div>
<div class="icon d-flex flex-column justify-content-center align-items-center pt-1">
<a href="#">
<i id="icon-person" class="bi bi-person text-white"></i>
</a>
<p class="p-subtitle-nav text-white">Profile</p>
</div>
</div>
</nav>
</main>
<script src="./js/models/modelToDo.js"></script>
<script src="./js/models/modelCategory.js"></script>
<script src="./js/Controller/taskController.js"></script>
<script src="./js/Controller/homeController.js"></script>
<script src="./js/Controller/PriorityController.js"></script>
<script src="./js/Controller/categoryController.js"></script>
<script src="./js/View/viewTask.js"></script>
<script src="./js/View/viewPriority.js"></script>
<script src="./js/View/viewCategory.js"></script>
<script src="./js/router.js"></script>
<script>
new homeController();
const task = document.querySelector("#icon-plus")
task.addEventListener("click", () => {
new Router().goTo("task");
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>