últimos jogos
+ + + + + +
+ 
+ experimente novas habilidades
+ +
+
+
+
+
+
+
diff --git a/src/app/pages/gamificacao/jogo-da-memoria/jogo-da-memoria.component.scss b/src/app/pages/gamificacao/jogo-da-memoria/jogo-da-memoria.component.scss
new file mode 100644
index 0000000..0cb47ed
--- /dev/null
+++ b/src/app/pages/gamificacao/jogo-da-memoria/jogo-da-memoria.component.scss
@@ -0,0 +1,157 @@
+@import '../../../../styles/base/variables';
+@import '../../../../styles/base/fonts';
+.header {
+ width: 100vw;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.slider-container {
+ position: absolute;
+ width: 80%;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.name-game {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: $boto-1;
+ font-size: 20px;
+ font-family: $primary-font;
+ font-weight: 700;
+ text-align: center;
+}
+
+.labels {
+ padding-top: 45px;
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 10px;
+ span {
+ font-family: $primary-font;
+ font-size: 14px;
+ color: $boto-1;
+ }
+}
+
+.slider {
+ -webkit-appearance: none;
+ width: 80%;
+ height: 8px;
+ border-radius: 5px;
+ background: linear-gradient(to right, #459c25, #d1b61b, #c30000);
+ opacity: 0.9;
+ transition: opacity 0.2s;
+}
+
+.slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 6px;
+ height: 20px;
+ border-radius: 20%;
+ background: $botao;
+ cursor: pointer;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+
+.slider::-moz-range-thumb {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: #0000ff;
+ cursor: pointer;
+}
+
+.game-board {
+ padding: 60px 0px 20px 0;
+ display: flex;
+ flex-wrap: wrap;
+ max-width: 700px;
+ justify-content: center;
+ gap: 10px;
+ margin: auto;
+}
+
+.card {
+ font-family: $primary-font;
+ font-weight: 500;
+ font-size: 16px;
+ color: $boto-1;
+ position: relative;
+ width: 115px;
+ height: 115px;
+ cursor: pointer;
+ perspective: 1000px;
+ transform-style: preserve-3d;
+ &.flipped .front,
+ &.matched .front {
+ transform: rotateY(0);
+ }
+ &.flipped .back,
+ &.matched .back {
+ transform: rotateY(180deg);
+ }
+ .front,
+ .back {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ backface-visibility: hidden;
+ transition: transform 0.6s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid $boto-1;
+ border-radius: 8px;
+ }
+ .front {
+ transform: rotateY(180deg);
+ }
+ .back {
+ background: #a29bfe;
+ transform: rotateY(0);
+ }
+}
+
+/* Centraliza o botão no container */
+
+.complete-button {
+ margin-bottom: 50px;
+ padding: 10px 20px;
+ background-color: #d9d7f1;
+ /* Cor de fundo do botão */
+ border: none;
+ border-radius: 8px;
+ /* Bordas arredondadas */
+ color: #4a4aad;
+ /* Cor do texto */
+ font-weight: bold;
+ font-size: 12px;
+ cursor: pointer;
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+ /* Sombra leve */
+ transition:
+ background-color 0.3s ease,
+ transform 0.2s ease;
+ /* Centraliza o botão no centro do container */
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* Efeito de hover */
+
+.complete-button:hover {
+ background-color: #c1b9f0;
+}
+
+/* Efeito ao clicar */
+
+.complete-button:active {
+ transform: scale(0.98);
+ /* Leve redução */
+}
diff --git a/src/app/pages/gamificacao/jogo-da-memoria/jogo-da-memoria.component.spec.ts b/src/app/pages/gamificacao/jogo-da-memoria/jogo-da-memoria.component.spec.ts
new file mode 100644
index 0000000..3d70f41
--- /dev/null
+++ b/src/app/pages/gamificacao/jogo-da-memoria/jogo-da-memoria.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JogoDaMemoriaComponent } from './jogo-da-memoria.component';
+
+describe('JogoDaMemoriaComponent', () => {
+ let component: JogoDaMemoriaComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+ ![Card Image]()
+
+
+
+
+
-
+
@@ -41,7 +52,8 @@
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [PlanoEstudosComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(PlanoEstudosComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/plano-estudos/plano-estudos.component.ts b/src/app/pages/plano-estudos/plano-estudos.component.ts
new file mode 100644
index 0000000..de0e2a2
--- /dev/null
+++ b/src/app/pages/plano-estudos/plano-estudos.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { Location } from '@angular/common';
+
+@Component({
+ selector: 'app-plano-estudos',
+ templateUrl: './plano-estudos.component.html',
+ styleUrl: './plano-estudos.component.scss',
+})
+export class PlanoEstudosComponent {
+ constructor(private location: Location) {}
+ goBack(): void {
+ this.location.back();
+ }
+}
diff --git a/src/app/pages/plano-estudos/plano-estudos.module.ts b/src/app/pages/plano-estudos/plano-estudos.module.ts
new file mode 100644
index 0000000..9f8c426
--- /dev/null
+++ b/src/app/pages/plano-estudos/plano-estudos.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../../shared/shared.module';
+// { ComponentsModule } from '../../shared/components/components.module';
+
+import { PlanoEstudosComponent } from './plano-estudos.component';
+import { planoEstudosRoutingModule } from './plano-estudos-routing.module';
+import { VideoAulaComponent } from './video-aula/video-aula.component';
+
+@NgModule({
+ imports: [CommonModule, SharedModule, planoEstudosRoutingModule],
+ declarations: [PlanoEstudosComponent, VideoAulaComponent],
+ exports: [],
+})
+export class PlanoEstudosModule {}
diff --git a/src/app/pages/plano-estudos/video-aula/video-aula.component.html b/src/app/pages/plano-estudos/video-aula/video-aula.component.html
new file mode 100644
index 0000000..9cfde74
--- /dev/null
+++ b/src/app/pages/plano-estudos/video-aula/video-aula.component.html
@@ -0,0 +1,68 @@
+;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [VideoAulaComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(VideoAulaComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/plano-estudos/video-aula/video-aula.component.ts b/src/app/pages/plano-estudos/video-aula/video-aula.component.ts
new file mode 100644
index 0000000..1a054f5
--- /dev/null
+++ b/src/app/pages/plano-estudos/video-aula/video-aula.component.ts
@@ -0,0 +1,139 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+@Component({
+ selector: 'app-video-aula',
+ templateUrl: './video-aula.component.html',
+ styleUrl: './video-aula.component.scss',
+})
+export class VideoAulaComponent implements OnInit, OnDestroy {
+ minutos: number = 25;
+ segundos: number = 0;
+ rodando: boolean = false;
+ ciclos: number = 0;
+ private intervalId: any = null;
+ private descansoCurto: number = 5;
+ private descansoLongo: number = 25;
+
+ aulaConcluida: boolean = false; // Estado do botão Concluir
+ aulaFavorita: boolean = false; // Estado do botão Favoritar
+
+ ngOnInit() {
+ this.carregarEstado();
+
+ // Carrega o estado dos botões ao iniciar o componente
+ const concluida = localStorage.getItem('aulaConcluida');
+ const favorita = localStorage.getItem('aulaFavorita');
+
+ this.aulaConcluida = concluida ? JSON.parse(concluida) : false;
+ this.aulaFavorita = favorita ? JSON.parse(favorita) : false;
+ }
+
+ ngOnDestroy() {
+ this.salvarEstado();
+ this.limparIntervalo();
+ }
+
+ // Salva o estado no localStorage
+ salvarEstado() {
+ const estado = {
+ minutos: this.minutos,
+ segundos: this.segundos,
+ rodando: this.rodando,
+ ciclos: this.ciclos,
+ };
+ localStorage.setItem('pomodoroEstado', JSON.stringify(estado));
+ }
+
+ // Carrega o estado salvo do localStorage
+ carregarEstado() {
+ const estado = localStorage.getItem('pomodoroEstado');
+ if (estado) {
+ const { minutos, segundos, rodando, ciclos } = JSON.parse(estado);
+ this.minutos = minutos;
+ this.segundos = segundos;
+ this.rodando = false; // Sempre inicia pausado após recarregar
+ this.ciclos = ciclos;
+ }
+ }
+
+ iniciar() {
+ if (this.rodando) return; // Impede múltiplos inícios
+ this.rodando = true;
+
+ this.intervalId = setInterval(() => {
+ if (this.segundos === 0) {
+ if (this.minutos > 0) {
+ this.minutos--;
+ this.segundos = 59;
+ } else {
+ this.finalizarCiclo();
+ }
+ } else {
+ this.segundos--;
+ }
+ this.salvarEstado(); // Atualiza o estado continuamente
+ }, 1000);
+ }
+
+ pausar() {
+ if (!this.rodando) return;
+ this.rodando = false;
+ this.limparIntervalo();
+ this.salvarEstado();
+ }
+
+ resetar() {
+ this.pausar();
+ this.minutos = 25;
+ this.segundos = 0;
+ this.ciclos = 0;
+ this.salvarEstado();
+ }
+
+ finalizarCiclo() {
+ this.pausar();
+
+ if (this.ciclos % 2 === 0) {
+ this.ciclos++;
+ if (this.ciclos === 8) {
+ this.minutos = this.descansoLongo;
+ this.ciclos = 0;
+ alert('Ciclo completo! Aproveite um descanso longo de 25 minutos.');
+ } else {
+ this.minutos = this.descansoCurto;
+ alert('Pomodoro concluído! Hora de um descanso curto de 5 minutos.');
+ }
+ } else {
+ this.ciclos++;
+ this.minutos = 25;
+ alert('Descanso concluído! Volte ao trabalho.');
+ }
+
+ this.segundos = 0;
+ this.salvarEstado();
+ this.iniciar();
+ }
+
+ limparIntervalo() {
+ if (this.intervalId) {
+ clearInterval(this.intervalId);
+ this.intervalId = null;
+ }
+ }
+
+ // Alterna o estado do botão Concluir
+ toggleConcluir() {
+ this.aulaConcluida = !this.aulaConcluida;
+
+ // Salva no localStorage
+ localStorage.setItem('aulaConcluida', JSON.stringify(this.aulaConcluida));
+ }
+
+ // Alterna o estado do botão Favoritar
+ toggleFavoritar() {
+ this.aulaFavorita = !this.aulaFavorita;
+
+ // Salva no localStorage
+ localStorage.setItem('aulaFavorita', JSON.stringify(this.aulaFavorita));
+ }
+}
diff --git a/src/app/pages/plano-estudos/video-aula/video-aula.module.ts b/src/app/pages/plano-estudos/video-aula/video-aula.module.ts
new file mode 100644
index 0000000..b6a5e2f
--- /dev/null
+++ b/src/app/pages/plano-estudos/video-aula/video-aula.module.ts
@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../../../shared/shared.module';
+
+@NgModule({
+ declarations: [],
+ imports: [CommonModule, SharedModule],
+})
+export class VideoAulaModule {}
diff --git a/src/app/shared/components/components.module.ts b/src/app/shared/components/components.module.ts
new file mode 100644
index 0000000..d7d2a70
--- /dev/null
+++ b/src/app/shared/components/components.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HeaderProfileComponent } from './header-profile/header-profile.component';
+import { FooterComponent } from './footer/footer.component';
+
+@NgModule({
+ declarations: [HeaderProfileComponent, FooterComponent],
+ imports: [CommonModule],
+ exports: [HeaderProfileComponent, FooterComponent],
+})
+export class ComponentsModule {}
diff --git a/src/app/shared/components/footer/footer.component.html b/src/app/shared/components/footer/footer.component.html
new file mode 100644
index 0000000..ea4078e
--- /dev/null
+++ b/src/app/shared/components/footer/footer.component.html
@@ -0,0 +1 @@
+
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
new file mode 100644
index 0000000..50fc3d1
--- /dev/null
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -0,0 +1,12 @@
+.footer {
+ width: 100vw;
+ height: 100px;
+ background: linear-gradient(180deg, #46467c 0%, #d0d0ff 100%);
+ border-top-left-radius: 100% 130%;
+ border-top-right-radius: 100% 130%;
+ position: relative;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ z-index: 100;
+}
diff --git a/src/app/shared/components/footer/footer.component.ts b/src/app/shared/components/footer/footer.component.ts
new file mode 100644
index 0000000..65a34f3
--- /dev/null
+++ b/src/app/shared/components/footer/footer.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-footer',
+ templateUrl: './footer.component.html',
+ styleUrl: './footer.component.scss',
+})
+export class FooterComponent {}
diff --git a/src/app/shared/components/footer/footer.components.spec.ts b/src/app/shared/components/footer/footer.components.spec.ts
new file mode 100644
index 0000000..4fdbb25
--- /dev/null
+++ b/src/app/shared/components/footer/footer.components.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+ let component: FooterComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [FooterComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(FooterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/header-profile/header-profile.component.html b/src/app/shared/components/header-profile/header-profile.component.html
new file mode 100644
index 0000000..7ec2908
--- /dev/null
+++ b/src/app/shared/components/header-profile/header-profile.component.html
@@ -0,0 +1 @@
+;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [HeaderProfileComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(HeaderProfileComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
new file mode 100644
index 0000000..3ec3d08
--- /dev/null
+++ b/src/app/shared/shared.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ComponentsModule } from './components/components.module';
+
+@NgModule({
+ declarations: [],
+ imports: [CommonModule, ComponentsModule],
+ exports: [ComponentsModule],
+})
+export class SharedModule {}
diff --git a/src/assets/caderno.svg b/src/assets/caderno.svg
new file mode 100644
index 0000000..6255932
--- /dev/null
+++ b/src/assets/caderno.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/gallery-video-aula/favoritar.svg b/src/assets/gallery-video-aula/favoritar.svg
new file mode 100644
index 0000000..a333528
--- /dev/null
+++ b/src/assets/gallery-video-aula/favoritar.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/gallery-video-aula/image1.jpeg b/src/assets/gallery-video-aula/image1.jpeg
new file mode 100644
index 0000000..afa8727
Binary files /dev/null and b/src/assets/gallery-video-aula/image1.jpeg differ
diff --git a/src/assets/gallery-video-aula/image2.jpeg b/src/assets/gallery-video-aula/image2.jpeg
new file mode 100644
index 0000000..0d07f69
Binary files /dev/null and b/src/assets/gallery-video-aula/image2.jpeg differ
diff --git a/src/assets/gallery-video-aula/image3.jpeg b/src/assets/gallery-video-aula/image3.jpeg
new file mode 100644
index 0000000..3ce62d8
Binary files /dev/null and b/src/assets/gallery-video-aula/image3.jpeg differ
diff --git a/src/assets/gallery-video-aula/image4.jpeg b/src/assets/gallery-video-aula/image4.jpeg
new file mode 100644
index 0000000..8b414e1
Binary files /dev/null and b/src/assets/gallery-video-aula/image4.jpeg differ
diff --git a/src/assets/livro.svg b/src/assets/livro.svg
new file mode 100644
index 0000000..bdc5050
--- /dev/null
+++ b/src/assets/livro.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/pomodoro/editar.svg b/src/assets/pomodoro/editar.svg
new file mode 100644
index 0000000..fe7c5cf
--- /dev/null
+++ b/src/assets/pomodoro/editar.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/pomodoro/play.svg b/src/assets/pomodoro/play.svg
new file mode 100644
index 0000000..1c2e2a6
--- /dev/null
+++ b/src/assets/pomodoro/play.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/pomodoro/relogio.svg b/src/assets/pomodoro/relogio.svg
new file mode 100644
index 0000000..04aacc7
--- /dev/null
+++ b/src/assets/pomodoro/relogio.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/verificado.svg b/src/assets/verificado.svg
new file mode 100644
index 0000000..30bf102
--- /dev/null
+++ b/src/assets/verificado.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/assets/video.svg b/src/assets/video.svg
new file mode 100644
index 0000000..23947f9
--- /dev/null
+++ b/src/assets/video.svg
@@ -0,0 +1,23 @@
+
diff --git a/src/index.html b/src/index.html
index a84a499..0a28fdd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,12 +1,14 @@
-
+
mindstep
@@ -41,7 +52,8 @@
- 
Vizualizar próximas atividades
+
+ 
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss
index e14dde0..d54a065 100644
--- a/src/app/pages/home/home.component.scss
+++ b/src/app/pages/home/home.component.scss
@@ -1,79 +1,122 @@
-@import '../../_config-css/variables.scss';
+@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;
- }
+ 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;
+ 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-personalizada {
- padding: 15px 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 12px;
- flex: 1;
+.home-content {
+ padding: 15px 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 12px;
+ flex: 1;
}
.card {
- width: 250px;
- height: 30px;
- border-radius: 7px;
- border: none;
- background-color: #e6e6fa;
- text-align: center;
- font-family: $font;
- font-size: 16px;
- font-weight: 500;
- display: flex;
- justify-content: space-between;
- align-items: center;
- box-shadow: 1px 1px 1px 1px rgba(#000000, 0.3);
- color: $first-secondary-color;
- padding: 20px;
- 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;
+}
+
+.dropdown-btn {
+ 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;
+}
+
+.dropdown-content a {
+ color: white;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown-content a:hover {
+ background-color: #3b3b6a;
+ /* Cor de destaque */
+}
+
+.show {
+ display: block;
}
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index b59e81b..bd3f75d 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
import { Location } from '@angular/common';
@Component({
@@ -12,4 +12,18 @@ export class HomeComponent {
goBack(): void {
this.location.back();
}
+
+ isDropdownOpen = false;
+
+ toggleDropdown() {
+ this.isDropdownOpen = !this.isDropdownOpen;
+ }
+
+ @HostListener('document:click', ['$event'])
+ closeDropdown(event: Event) {
+ const target = event.target as HTMLElement;
+ if (!target.closest('.dropdown')) {
+ this.isDropdownOpen = false;
+ }
+ }
}
diff --git a/src/app/pages/plano-estudos/plano-estudos-routing.module.ts b/src/app/pages/plano-estudos/plano-estudos-routing.module.ts
new file mode 100644
index 0000000..aac0202
--- /dev/null
+++ b/src/app/pages/plano-estudos/plano-estudos-routing.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PlanoEstudosComponent } from './plano-estudos.component';
+import { VideoAulaComponent } from './video-aula/video-aula.component';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: PlanoEstudosComponent,
+ },
+ {
+ path: 'matematica',
+ component: VideoAulaComponent,
+ },
+];
+
+@NgModule({
+ imports: [CommonModule, RouterModule.forChild(routes)],
+ exports: [RouterModule],
+})
+export class planoEstudosRoutingModule {}
diff --git a/src/app/pages/plano-estudos/plano-estudos.component.html b/src/app/pages/plano-estudos/plano-estudos.component.html
new file mode 100644
index 0000000..824f82c
--- /dev/null
+++ b/src/app/pages/plano-estudos/plano-estudos.component.html
@@ -0,0 +1,102 @@
+ Vizualizar próximas atividades
+
+ Vizualizar próximas atividades
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
diff --git a/src/app/pages/plano-estudos/plano-estudos.component.scss b/src/app/pages/plano-estudos/plano-estudos.component.scss
new file mode 100644
index 0000000..be7fdfa
--- /dev/null
+++ b/src/app/pages/plano-estudos/plano-estudos.component.scss
@@ -0,0 +1,112 @@
+@import '../../../styles/base/variables';
+@import '../../../styles/base/fonts';
+.header-content {
+ 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;
+ }
+}
+
+.img-profile {
+ 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;
+}
+
+.home-content {
+ width: 80%;
+ margin: 0 auto;
+ h1 {
+ font-family: $primary-font;
+ font-size: 20px;
+ font-weight: 700;
+ text-align: center;
+ color: $boto-1;
+ padding: 15px 0;
+ }
+ .cards {
+ gap: 16px;
+ padding: 15px 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ flex: 1;
+ label {
+ font-size: 16px;
+ font-weight: 400;
+ }
+ span {
+ text-align: start;
+ font-size: 10px;
+ }
+ }
+}
+
+.card {
+ width: 280px;
+ height: 42px;
+ border-radius: 7px;
+ border: none;
+ background-color: $background-p;
+ 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;
+ }
+ .label-porcentagem {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: start;
+ margin: 0 2px;
+ .porcentagem-icon {
+ width: 170px;
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ gap: 3px;
+ img {
+ width: 10px;
+ height: 10px;
+ }
+ }
+ }
+}
diff --git a/src/app/pages/plano-estudos/plano-estudos.component.spec.ts b/src/app/pages/plano-estudos/plano-estudos.component.spec.ts
new file mode 100644
index 0000000..5cae4ec
--- /dev/null
+++ b/src/app/pages/plano-estudos/plano-estudos.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlanoEstudosComponent } from './plano-estudos.component';
+
+describe('PlanoEstudosComponent', () => {
+ let component: PlanoEstudosComponent;
+ let fixture: ComponentFixturePlano de Estudo
+ + +
+ 
+ 
+ 
+
+
+
+
+
+
+
+
diff --git a/src/app/pages/plano-estudos/video-aula/video-aula.component.scss b/src/app/pages/plano-estudos/video-aula/video-aula.component.scss
new file mode 100644
index 0000000..b56e824
--- /dev/null
+++ b/src/app/pages/plano-estudos/video-aula/video-aula.component.scss
@@ -0,0 +1,213 @@
+@import '../../../../styles/base/fonts';
+@import '../../../../styles/base/variables';
+@import '../../../../styles/base/reset';
+.main-content {
+ width: 90vw;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 0;
+}
+
+/* Estilização básica */
+
+.button-container {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+/* Botões gerais */
+
+.btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 10px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ background-color: #ebe6ff;
+ color: #6558f5;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.btn .icon {
+ font-size: 14px;
+}
+
+/* Hover para os botões */
+
+.btn:hover {
+ background-color: rgba($color: #6558f5, $alpha: 0.4);
+ color: #ffffff;
+}
+
+/* Estilos específicos do botão Concluir */
+
+.concluir {
+ background-color: #ebe6ff;
+ height: 30px;
+ width: 80px;
+ font-size: 14px;
+ font-family: $primary-font;
+ font-weight: 400;
+ border: 1px solid #6558f5;
+ border-radius: 8px;
+}
+
+.concluir.active {
+ background-color: #6558f5;
+ color: #ffffff;
+}
+
+/* Estilos específicos do botão Favoritar */
+
+.favoritar {
+ background-color: none;
+ padding: 8px;
+ width: 18px;
+ height: 19px;
+}
+
+.favoritar.active {
+ background-color: #6558f5;
+ border-radius: 0 -10px -10px 0;
+}
+
+.favoritar .icon {
+ margin-right: 0;
+}
+
+.video-player {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ iframe {
+ width: 100%;
+ height: 280px;
+ border: 1px solid $boto-1;
+ }
+ .notes-input {
+ width: 98%;
+ max-width: 600px;
+ padding: 8px;
+ border: 1px solid $boto-1;
+ border-radius: 0 0 8px 8px;
+ }
+ h3 {
+ padding: 2px 5px;
+ height: 20px;
+ background-color: $boto-1;
+ color: #fff;
+ width: 100%;
+ font-family: $primary-font;
+ font-size: 14px;
+ font-weight: 400;
+ text-align: end;
+ }
+}
+
+.gallery-content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+ overflow-x: auto;
+ width: 300px;
+ height: 70px;
+ background-color: $background-p;
+ padding: 0px 20px;
+ box-shadow: 1px 1px 2px 1px rgba($color: #000000, $alpha: 0.4);
+}
+
+.gallery img {
+ width: 74px;
+ height: 58px;
+ cursor: pointer;
+ border: 1px solid $boto-1;
+}
+
+.pomodoro-timer {
+ color: #fff;
+ border-radius: 8px;
+ background: rgba($color: #c30000, $alpha: 0.4);
+ text-align: center;
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+ padding: 0 0 10px 0;
+ width: 230px;
+ height: 140px;
+ .title-pomodoro {
+ padding: 1px 25px;
+ background: #c30000;
+ border-radius: 8px 8px 0 0;
+ font-family: $primary-font;
+ h2 {
+ font-size: 18px;
+ font-weight: 200;
+ }
+ }
+ .temporizador {
+ padding: 10px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ h1 {
+ font-family: $primary-font;
+ font-size: 20px;
+ text-align: center;
+ font-weight: 200;
+ }
+ .temp {
+ border: 1px solid #fff;
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+}
+
+.controls {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ button {
+ background: none;
+ cursor: pointer;
+ img {
+ height: 15px;
+ width: 15px;
+ }
+ }
+}
+
+.footer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ width: 100vw;
+ height: 80px;
+ z-index: 101;
+}
+
+.activity-btn {
+ background-color: $botao-pressionado;
+ color: $texto-login;
+ padding: 5px 10px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ font-family: $primary-font;
+ font-weight: 400;
+}
diff --git a/src/app/pages/plano-estudos/video-aula/video-aula.component.spec.ts b/src/app/pages/plano-estudos/video-aula/video-aula.component.spec.ts
new file mode 100644
index 0000000..204c6b3
--- /dev/null
+++ b/src/app/pages/plano-estudos/video-aula/video-aula.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VideoAulaComponent } from './video-aula.component';
+
+describe('VideoAulaComponent', () => {
+ let component: VideoAulaComponent;
+ let fixture: ComponentFixture
+
+
+
+ Matemática e Estatísca
+ +
+
+
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+ Pomodoro Timer
+
+
+
+
+
+ {{ minutos }}:{{ segundos | number: '2.0' }}
+
+
+
+
+
+