+
+ {{ title }}
+{{ subtitle }}
+{{ seguidores }}
+
+
+
+
+ {{ nivel }}
+
+
+
+
+ ![]()
+ ![]()
+ ![]()
+
+
+
+
+
Perfil profissional
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index d54a065..9558239 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -1,122 +1,122 @@ @import '../../../styles/base/variables'; @import '../../../styles/base/fonts'; .header-content { - width: 100vw; - position: absolute; + width: 100vw; + position: absolute; } .content-icon { - display: flex; - justify-content: space-between; - align-items: center; - max-width: 90vw; - width: 90vw; - margin: 0 auto; - padding-top: 25px; - button { - background: none; - cursor: pointer; - img { - width: 25px; - height: 25px; - background: none; + display: flex; + justify-content: space-between; + align-items: center; + max-width: 90vw; + width: 90vw; + margin: 0 auto; + padding-top: 25px; + button { + background: none; + cursor: pointer; + img { + width: 25px; + height: 25px; + background: none; + } } - } } .img-profile { - display: flex; - align-items: center; - justify-content: center; - position: relative; - img { - width: 90px; - height: 90px; - } + display: flex; + align-items: center; + justify-content: center; + position: relative; + img { + width: 90px; + height: 90px; + } } .seach-notification { - display: flex; - justify-content: center; - align-items: center; - gap: 5px; + display: flex; + justify-content: center; + align-items: center; + gap: 5px; } .home-content { - padding: 15px 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 12px; - flex: 1; + padding: 15px 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 12px; + flex: 1; } .card { - width: 280px; - height: 40px; - border-radius: 7px; - border: none; - background-color: $background-p; - text-align: center; - font-family: $primary-font; - font-size: 16px; - font-weight: 500; - display: flex; - justify-content: space-between; - align-items: center; - box-shadow: 1px 1px 3px 1px rgba(#000000, 0.3); - color: $boto-1; - padding: 18px; - img { - height: 20px; - width: 20px; - } + width: 280px; + height: 40px; + border-radius: 7px; + border: none; + background-color: $background-p; + text-align: center; + font-family: $primary-font; + font-size: 16px; + font-weight: 500; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 1px 1px 3px 1px rgba(#000000, 0.3); + color: $boto-1; + padding: 18px; + img { + height: 20px; + width: 20px; + } } .card:hover { - padding: 25px; - transition: ease-in-out 100ms; + padding: 25px; + transition: ease-in-out 100ms; } // DROPDOWN .dropdown { - position: relative; - display: inline-block; + position: relative; + display: inline-block; } .dropdown-btn { - background-color: #4a4a8a; - /* Cor semelhante ao menu */ - color: white; - padding: 10px 20px; - font-size: 16px; - border: none; - cursor: pointer; + background-color: #4a4a8a; + /* Cor semelhante ao menu */ + color: white; + padding: 10px 20px; + font-size: 16px; + border: none; + cursor: pointer; } .dropdown-content { - display: none; - position: absolute; - background-color: #4a4a8a; - /* Cor do fundo */ - min-width: 200px; - box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); - z-index: 1002; + display: none; + position: absolute; + background-color: #4a4a8a; + /* Cor do fundo */ + min-width: 200px; + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); + z-index: 1002; } .dropdown-content a { - color: white; - padding: 12px 16px; - text-decoration: none; - display: block; + color: white; + padding: 12px 16px; + text-decoration: none; + display: block; } .dropdown-content a:hover { - background-color: #3b3b6a; - /* Cor de destaque */ + background-color: #3b3b6a; + /* Cor de destaque */ } .show { - display: block; + display: block; } diff --git a/src/app/pages/perfil-profissional/perfil-profissional.component.html b/src/app/pages/perfil-profissional/perfil-profissional.component.html new file mode 100644 index 0000000..748df70 --- /dev/null +++ b/src/app/pages/perfil-profissional/perfil-profissional.component.html @@ -0,0 +1,28 @@ + + +
+
diff --git a/src/app/pages/perfil-profissional/perfil-profissional.component.scss b/src/app/pages/perfil-profissional/perfil-profissional.component.scss
new file mode 100644
index 0000000..325b21c
--- /dev/null
+++ b/src/app/pages/perfil-profissional/perfil-profissional.component.scss
@@ -0,0 +1,31 @@
+@import '../../../styles/base/fonts';
+@import '../../../styles/base/variables';
+@import '../../../styles/base/reset';
+.main-content {
+ width: 90vw;
+ margin: 0 auto;
+ color: $boto-1;
+ font-family: $primary-font;
+}
+
+.title-header {
+ display: flex;
+ flex-direction: column;
+ .title {
+ font-weight: 500;
+ font-size: 16px;
+ }
+ .subtitle {
+ font-weight: 400;
+ font-size: 14px;
+ }
+}
+
+.seguidores {
+ border-radius: 15px;
+ padding: 7px 15px;
+ background-color: $background-p;
+ font-weight: 400;
+ font-size: 16px;
+ margin: 10px 0;
+}
diff --git a/src/app/pages/perfil-profissional/perfil-profissional.component.spec.ts b/src/app/pages/perfil-profissional/perfil-profissional.component.spec.ts
new file mode 100644
index 0000000..5530512
--- /dev/null
+++ b/src/app/pages/perfil-profissional/perfil-profissional.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerfilProfissionalComponent } from './perfil-profissional.component';
+
+describe('PerfilProfissionalComponent', () => {
+ let component: PerfilProfissionalComponent;
+ let fixture: ComponentFixturePróximas Atividades
-
+
+
diff --git a/src/app/pages/proximas-atividades/proximas-atividades.component.scss b/src/app/pages/proximas-atividades/proximas-atividades.component.scss
index 3a6b582..155afb7 100644
--- a/src/app/pages/proximas-atividades/proximas-atividades.component.scss
+++ b/src/app/pages/proximas-atividades/proximas-atividades.component.scss
@@ -2,25 +2,26 @@
@import '../../../styles/base/variables';
@import '../../../styles/base/reset';
.main-content {
- width: 90vw;
- margin: 0 auto;
- h3 {
- text-align: center;
- font-family: $primary-font;
- font-size: 20px;
- font-weight: 500;
- color: $boto-1;
- padding: 40px;
- text-shadow: 1px 1px 1px rgba($color: #000000, $alpha: 0.2);
- }
+ width: 90vw;
+ margin: 0 auto;
+ h3 {
+ text-align: center;
+ font-family: $primary-font;
+ font-size: 20px;
+ font-weight: 500;
+ color: $boto-1;
+ padding: 40px;
+ text-shadow: 1px 1px 1px rgba($color: #000000, $alpha: 0.2);
+ }
}
.activities {
- list-style: none;
- padding: 0;
- margin: 20px 0;
+ list-style: none;
+ padding: 0;
+ margin: 20px 0;
}
+
/*
.progress-container {
width: 100%;
@@ -52,42 +53,117 @@
*/
.card-materia {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ padding-bottom: 30px;
}
.progress-container-header {
- display: flex;
- justify-content: space-around;
+ display: flex;
+ justify-content: space-between;
}
.progress-container-header {
- li {
- padding-right: 40px;
- }
+ li {
+ list-style-position: inside;
+ padding-left: 0;
+ margin-left: 0;
+ /* Ou outside, dependendo do layout desejado */
+ font-size: 20px;
+ }
+ span {
+ font-size: 16px;
+ }
}
.barra-materia {
- width: 100%;
- background-color: $background-p;
- padding: 20px 10px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 95%;
+ margin: 0 auto;
+ background-color: $background-p;
+ padding: 10px 10px;
+ border-radius: 10px;
+ box-shadow: 1px 1px 3px rgba($color: #000000, $alpha: 0.2);
+ font-family: $primary-font;
+ font-weight: 500;
+ color: $boto-1;
+ .progress-barra {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ .barra {
+ display: flex;
+ justify-content: start;
+ width: 70%;
+ border-radius: 5px;
+ height: 5px;
+ background-color: #FFF;
+ }
+ .porcentagem {
+ font-size: 10px;
+ }
+ }
+}
+
+.chart-container {
+ background-color: #f8f9fc;
+ border-radius: 12px;
+ padding: 20px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ width: 75vw;
+ height: 250px;
+ margin: 0 auto;
+ border: 1px solid $boto-1;
+}
+
+.chart-container h3 {
+ text-align: center;
+ font-size: 16px;
+ color: #5f5d70;
+ margin-bottom: 16px;
}
.chart {
- margin-top: 20px;
- padding: 10px;
- background-color: #eef2ff;
- border-radius: 10px;
-}
-
-.chart-placeholder {
- height: 150px;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: #d4d4d4;
- border-radius: 5px;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+}
+
+.day {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 12%;
+}
+
+.label {
+ font-size: 10px;
+ color: #5f5d70;
+ margin-bottom: 4px;
+}
+
+.bar {
+ width: 100%;
+ border-radius: 4px;
+ background: #a7b0d4;
+ transition: all 0.3s ease;
+}
+
+.bar:hover {
+ opacity: 0.8;
+}
+
+.selected .bar {
+ background: #4e4c9a;
+}
+
+.time {
+ font-size: 10px;
+ color: #5f5d70;
+ margin-top: 4px;
}
diff --git a/src/app/pages/proximas-atividades/proximas-atividades.component.ts b/src/app/pages/proximas-atividades/proximas-atividades.component.ts
index d37ea36..255a299 100644
--- a/src/app/pages/proximas-atividades/proximas-atividades.component.ts
+++ b/src/app/pages/proximas-atividades/proximas-atividades.component.ts
@@ -8,6 +8,17 @@ import { Component, OnInit } from '@angular/core';
})
export class ProximasAtividadesComponent implements OnInit {
progress: number = 0;
+ title: string = 'últimos 7 dias';
+
+ days = [
+ { label: 'Qua 06', time: '1h:30', height: '30%', isSelected: false },
+ { label: 'Qui 07', time: '2h:18', height: '65%', isSelected: false },
+ { label: 'Sex 08', time: '1h:40', height: '55%', isSelected: false },
+ { label: 'Sab 09', time: '1h:20', height: '40%', isSelected: false },
+ { label: 'Dom 10', time: '4h:00', height: '100%', isSelected: false },
+ { label: 'Seg 11', time: '2h:01', height: '50%', isSelected: false },
+ { label: 'Ter 12', time: '1h:45', height: '45%', isSelected: true },
+ ];
//constructor(private http: HttpClient) {}
ngOnInit(): void {
diff --git a/src/index.html b/src/index.html
index 0a28fdd..f4a0a82 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,8 @@
+
+
diff --git a/src/styles.scss b/src/styles.scss
index 4550372..4f7ffa9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -4,7 +4,7 @@
@import '../src/styles/base/reset';
@import '../src/styles/base/variables';
:root {
- background-color: $background;
- width: 100%;
- overflow-x: hidden;
+ background-color: $background;
+ width: 100%;
+ overflow-x: hidden;
}
Últimos 7 dias
-Gráfico de progresso
+
+
{{ title }}
+
+
+ {{ day.label }}
+
+ {{ day.time }}
+
+