diff --git a/README.md b/README.md
index 6f976c30..71dac671 100644
--- a/README.md
+++ b/README.md
@@ -1,27 +1,74 @@
-# AngularBlog
+# 📌 Dev's Blog
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.2.
+## 📖 Sobre o projeto
+Este projeto foi desenvolvido com Angular 14.1.3 como parte de um desafio da DIO para o Decola Tech 2025, onde realizei um fork do repositório original do professor, como foi recomendado, e implementei diversas melhorias e novas funcionalidades.
-## Development server
+O Blog Dev tem como objetivo ser um espaço onde desenvolvedores podem acompanhar tendências de mercado, oportunidades de trabalho e novidades do mundo da tecnologia!
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+## 🚀 Como testar
-## Code scaffolding
+### Pré-requisitos
+- Node.js instalado (versão recomendada: 16.x ou superior)
+- Angular CLI instalado globalmente (`npm install -g @angular/cli`)
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+### Passos
+1. Clone o repositório:
+ ```sh
+ git clone https://github.com/AlissonLimaG/angular-blog.git
+ ```
+2. Acesse o diretório do projeto:
+ ```sh
+ cd nome-do-projeto
+ ```
+3. Instale as dependências:
+ ```sh
+ npm install
+ ```
+4. Inicie o servidor de desenvolvimento:
+ ```sh
+ ng serve
+ ```
+5. Acesse o projeto no navegador:
+ ```
+ http://localhost:4200
+ ```
-## Build
+## 🔥 Alterações e incrementos
+- **Adicionado um formulário** para cadastro de novos artigos e notícias.
+- **Modo claro e escuro** implementado para melhor experiência do usuário.
+- **Melhorias na responsividade**, garantindo que o blog funcione bem em diferentes dispositivos.
+- **Pequenas animações** para tornar a navegação mais fluida e agradável.
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+## 🖼️ Capturas de tela
+- ### Home Desktop
+
+
-## Running unit tests
+- ### Home Mobile
+
+
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+- ### Article Desktop
+
+
-## Running end-to-end tests
+- ### Article Mobile
+
+
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+- ### Form Desktop
+
-## Further help
+- ### New Article Desktop
+
+
+- ### Form Mobile
+
+
+
+
+## ⏭️ Próximos passos
+- Implementar **validação no formulário** de artigos para garantir dados mais estruturados e consistentes.
+- Melhorar ainda mais a **experiência do usuário** com ajustes visuais e usabilidade.
+- Explorar **novas funcionalidades**, como categorias e filtros de artigos.
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
diff --git a/assets/addArticle.png b/assets/addArticle.png
new file mode 100644
index 00000000..3e652929
Binary files /dev/null and b/assets/addArticle.png differ
diff --git a/assets/articleAdded.png b/assets/articleAdded.png
new file mode 100644
index 00000000..b3ad803e
Binary files /dev/null and b/assets/articleAdded.png differ
diff --git a/assets/articleDark.png b/assets/articleDark.png
new file mode 100644
index 00000000..a149df0b
Binary files /dev/null and b/assets/articleDark.png differ
diff --git a/assets/articleLight.png b/assets/articleLight.png
new file mode 100644
index 00000000..565789b7
Binary files /dev/null and b/assets/articleLight.png differ
diff --git a/assets/articleMobileDark.png b/assets/articleMobileDark.png
new file mode 100644
index 00000000..1ab88d4f
Binary files /dev/null and b/assets/articleMobileDark.png differ
diff --git a/assets/articleMobileLight.png b/assets/articleMobileLight.png
new file mode 100644
index 00000000..612ac5fd
Binary files /dev/null and b/assets/articleMobileLight.png differ
diff --git a/assets/formMobileDark.png b/assets/formMobileDark.png
new file mode 100644
index 00000000..57a51b22
Binary files /dev/null and b/assets/formMobileDark.png differ
diff --git a/assets/formMobileLight.png b/assets/formMobileLight.png
new file mode 100644
index 00000000..323082c4
Binary files /dev/null and b/assets/formMobileLight.png differ
diff --git a/assets/homeDark.png b/assets/homeDark.png
new file mode 100644
index 00000000..032bd74a
Binary files /dev/null and b/assets/homeDark.png differ
diff --git a/assets/homeLight.png b/assets/homeLight.png
new file mode 100644
index 00000000..402d1eb0
Binary files /dev/null and b/assets/homeLight.png differ
diff --git a/assets/homeMobileDark.png b/assets/homeMobileDark.png
new file mode 100644
index 00000000..99396d88
Binary files /dev/null and b/assets/homeMobileDark.png differ
diff --git a/assets/homeMobileLight.png b/assets/homeMobileLight.png
new file mode 100644
index 00000000..1f1c359d
Binary files /dev/null and b/assets/homeMobileLight.png differ
diff --git a/src/app/app.component.html b/src/app/app.component.html
index dfc8f0a4..c2414e11 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-
+
-
+
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e17988a2..a1c5461d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,6 +9,9 @@ import { BigCardComponent } from './components/big-card/big-card.component';
import { SmallCardComponent } from './components/small-card/small-card.component';
import { HomeComponent } from './pages/home/home.component';
import { ContentComponent } from './pages/content/content.component';
+import { ThemeButtonComponent } from './components/theme-button/theme-button.component';
+import { ThemeService } from './service/theme.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
@@ -19,13 +22,16 @@ import { ContentComponent } from './pages/content/content.component';
BigCardComponent,
SmallCardComponent,
HomeComponent,
- ContentComponent
+ ContentComponent,
+ ThemeButtonComponent,
],
imports: [
BrowserModule,
- AppRoutingModule
+ AppRoutingModule,
+ FormsModule,
+ ReactiveFormsModule
],
- providers: [],
+ providers: [ThemeService],
bootstrap: [AppComponent]
})
export class AppModule { }
diff --git a/src/app/components/big-card/big-card.component.css b/src/app/components/big-card/big-card.component.css
index b9fd1a11..82ad7efb 100644
--- a/src/app/components/big-card/big-card.component.css
+++ b/src/app/components/big-card/big-card.component.css
@@ -1,24 +1,35 @@
.container__big-card{
-
- margin-left: 20px;
- margin-right: 20px;
- margin-bottom: 40px;
+ cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
+ box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+ flex: 1;
- @media(min-width: 700px) {
- width: 200px;
+ @media(min-width: 800px) {
+ width: 100%;
margin-bottom: 0;
}
+
@media(min-width: 1000px) {
- width: 400px;
+ max-width: 700px;
+ }
+
+ @media(max-width: 900px) {
+ margin-bottom: 1rem;
}
}
+.container__big-card:hover{
+ transform: scale(1.005);
+}
+
+.card_content{
+ padding: 1rem;
+}
+
.big-card__title > h1 {
- margin-top: 15px;
font-size: 20px;
}
@@ -27,17 +38,10 @@
}
.big-card__description > p > a {
- color: grey;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.big-card__photo > img{
width: 100%;
height: auto;
- @media(min-width: 700px) {
- min-width: 200px;
- }
- @media(min-width: 1000px) {
- min-width: 400px;
- }
}
diff --git a/src/app/components/big-card/big-card.component.html b/src/app/components/big-card/big-card.component.html
index 8a8e9d46..b23e5333 100644
--- a/src/app/components/big-card/big-card.component.html
+++ b/src/app/components/big-card/big-card.component.html
@@ -1,24 +1,19 @@
-
diff --git a/src/app/components/small-card/small-card.component.ts b/src/app/components/small-card/small-card.component.ts
index 9e99529b..6ae5ae67 100644
--- a/src/app/components/small-card/small-card.component.ts
+++ b/src/app/components/small-card/small-card.component.ts
@@ -16,6 +16,9 @@ export class SmallCardComponent implements OnInit {
@Input()
Id:string="0"
+ @Input()
+ description:string = ""
+
constructor() { }
ngOnInit(): void {
diff --git a/src/app/components/theme-button/theme-button.component.css b/src/app/components/theme-button/theme-button.component.css
new file mode 100644
index 00000000..5beb5b8b
--- /dev/null
+++ b/src/app/components/theme-button/theme-button.component.css
@@ -0,0 +1,6 @@
+.theme__button{
+ padding: 10px;
+ border-radius: 5px;
+ cursor: pointer;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/src/app/components/theme-button/theme-button.component.html b/src/app/components/theme-button/theme-button.component.html
new file mode 100644
index 00000000..a754a96f
--- /dev/null
+++ b/src/app/components/theme-button/theme-button.component.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/app/components/theme-button/theme-button.component.ts b/src/app/components/theme-button/theme-button.component.ts
new file mode 100644
index 00000000..eb7d098e
--- /dev/null
+++ b/src/app/components/theme-button/theme-button.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import {ThemeService} from '../../service/theme.service';
+
+@Component({
+ selector: 'app-theme-button',
+ templateUrl: './theme-button.component.html',
+ styleUrls: ['./theme-button.component.css','theme-button.responsive.component.css']
+})
+export class ThemeButtonComponent implements OnInit {
+
+ constructor(private readonly themeService: ThemeService) { }
+
+ modo:string = 'Escuro';
+
+ switchTheme(){
+ this.themeService.switchTheme();
+ if(this.modo === 'Claro') this.modo = 'Escuro';
+ else this.modo = 'Claro';
+ }
+
+ ngOnInit(): void {
+
+ }
+
+}
diff --git a/src/app/components/theme-button/theme-button.responsive.component.css b/src/app/components/theme-button/theme-button.responsive.component.css
new file mode 100644
index 00000000..e89e79e2
--- /dev/null
+++ b/src/app/components/theme-button/theme-button.responsive.component.css
@@ -0,0 +1,8 @@
+@media screen and (max-width:600px) {
+ .theme__button{
+ width: 60px;
+ height: 60px;
+ padding: 0;
+ border-radius: 50%;
+ }
+}
diff --git a/src/app/data/dataFake.ts b/src/app/data/dataFake.ts
index 607c3610..132cd989 100644
--- a/src/app/data/dataFake.ts
+++ b/src/app/data/dataFake.ts
@@ -1,14 +1,26 @@
export const dataFake = [
{
- "id":"1",
- "title": "NOVO HOMEM DE FERRO EM 3D",
- "description": "marvel anuncia um novo filme do homem de ferro, confira",
- "photoCover":"https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/7F51FA9F6CBD9F0C9B1394B1CC0A6A842D07091318674E234CD33CBF7C28CDC3/scale?width=1200&aspectRatio=1.78&format=jpeg"
+ id: "1",
+ title: "Tendências tecnológicas para 2025: o futuro da inovação e eficiência",
+ description: "O Gartner revelou as principais tendências tecnológicas estratégicas para 2025, oferecendo insights fundamentais sobre como líderes e empresas podem se preparar para um futuro moldado por inovações disruptivas. Estas tendências abrangem desde novas fronteiras na Inteligência Artificial (IA) até tecnologias que aprimoram a eficiência energética e a interação homem-máquina, ajudando a mitigar riscos e potencializar operações. A IA agêntica representa uma revolução ao permitir que sistemas tomem decisões e executem tarefas de forma autônoma, alinhadas aos objetivos definidos pelos usuários. Essa tecnologia é vista como um meio de aumentar a produtividade e reduzir a carga de trabalho humano, com previsão de que, até 2028, 15% das decisões diárias serão feitas por IA sem intervenção humana. Plataformas de governança da IA são essenciais para garantir a transparência e a ética no uso da tecnologia. Essas ferramentas ajudam as empresas a desenvolver políticas claras para prevenir incidentes éticos e aumentar a confiança pública. O Gartner prevê que, até 2028, empresas que adotarem governança abrangente de IA terão 40% menos incidentes éticos relacionados à tecnologia. Com a proliferação de ferramentas de IA usadas para fins maliciosos, como deepfakes e campanhas de desinformação, a segurança contra desinformação se torna essencial. Estima-se que, até 2028, metade das empresas adotarão soluções específicas para combater informações falsas e proteger sua reputação e operações. O avanço da computação quântica ameaça tornar obsoletos muitos dos sistemas de criptografia atuais. O Gartner alerta que empresas devem começar a adotar criptografia pós-quântica para proteger seus dados no longo prazo, com a expectativa de que até 2029 a maioria das criptografias assimétricas convencionais se torne insegura. A computação híbrida combina diferentes paradigmas tecnológicos, como processadores neuromórficos e sistemas quânticos, para resolver problemas complexos. Já a computação espacial, utilizando tecnologias de realidade aumentada e virtual, promete transformar a interação entre o mundo físico e o digital, projetando um mercado de US$ 1,7 trilhões até 2033. Sensores inteligentes e etiquetas de baixo custo viabilizarão a “inteligência invisível”, que integrará monitoramento em tempo real para melhorar a logística e a gestão de estoques. Isso será fundamental para setores como varejo e logística de produtos perecíveis. Os robôs estão evoluindo para se tornarem polifuncionais, capazes de executar múltiplas tarefas e operar ao lado de humanos, promovendo eficiência e escalabilidade rápida. Até 2030, espera-se que 80% da população interaja diariamente com robôs inteligentes. Tecnologias de interfaces cérebro-máquina prometem melhorar as capacidades cognitivas humanas e otimizar o desempenho no trabalho. Embora desafiador, o aprimoramento neurológico poderá impactar significativamente o marketing e a produtividade no futuro. A sustentabilidade é uma prioridade, e tecnologias emergentes, como sistemas ópticos e neuromórficos, prometem reduzir o consumo energético em tarefas intensivas, como o treinamento de IA. Empresas estão sendo incentivadas a adotar estratégias mais eficientes para atender às demandas por uma menor pegada de carbono. A combinação de inovação responsável, segurança digital e novas formas de computação vai ajudar empresas e líderes a enfrentar os desafios da próxima década. Acompanhar essas transformações será essencial para garantir vantagem competitiva e operar com resiliência em um ambiente cada vez mais digitalizado.",
+ photoCover: "https://brandnews.com.br/images/noticias/15473/30104227_IMG_2874.jpeg"
},
{
- "id":"2",
- "title": "Nova Série anunciada no Disney +",
- "description": "bla blabla",
- "photoCover":"https://disneyplusbrasil.com.br/wp-content/uploads/2021/07/Series-Marvel-Disney-Plus-1024x576.jpg"
+ id: "2",
+ title: "Do Mundo VUCA ao Mundo BANI",
+ description: "VUCA (Volatility, Uncertainty, Complexity e Ambiguity): é um termo cunhado na década de 80\nque foi herdado do contexto militar, para tentar definir as principais características no mundo do trabalho.\nVolátil é um termo usado em Química para designar tudo que evapora no seu estado normal com facilidade, ou seja,\ntudo o que é inconstante e volúvel.\n\nIncerteza é o mesmo que dúvida, hesitação, indecisão, imprecisão.\nComplexidade é algo de difícil compreensão ou entendimento, sendo observável sob vários pontos de vista.\nAmbiguidade é a qualidade daquilo que possui ou pode possuir diferentes sentidos.\n\nPara o antropólogo e historiador Jamais Cascio, professor do Universidade da Califórnia e membro do Institute for the Future, o termo VUCA não é mais suficiente, e foi a partir dessas reflexões sobre as circunstâncias atuais, que ele cunhou o termo BANI em abril de 2020.",
+ photoCover: "https://taisguedes.com.br/wp-content/uploads/2021/02/Captura-de-Tela-2020-12-11-a%CC%80s-07.08.34-1024x576.png"
+ },
+ {
+ id: "3",
+ title: "Por que a demanda por Desenvolvedores de Software será ainda maior em 2025?",
+ description: "Seja na indústria de tecnologia ou não, todas as organizações modernas precisam adotar efetivamente ferramentas digitais. Um recente artigo da McKinsey Digital afirmou: “Cada vez mais, empresas tradicionais estão percebendo que, para competir e crescer em um mundo digital, precisam se parecer, pensar e agir como empresas de software.” Os desenvolvedores de software já são vitais para impulsionar as agendas digitais das empresas. O papel do desenvolvedor de software se tornará ainda mais crucial em 2025 e nos próximos anos. Uma das principais razões é que sua amplitude se expandiu com o surgimento de novas tecnologias, como cloud computing, inteligência artificial (IA) e blockchain. Além disso, à medida que o mundo digital se expande, aumenta também a necessidade de soluções de cibersegurança. Realidade virtual (VR) e realidade aumentada (AR) são outras áreas em que os desenvolvedores são mais necessários do que nunca. Como o mercado de software de AR e VR usado para impulsionar soluções inovadoras ainda é novo, a indústria requer que os desenvolvedores usem sua expertise e criatividade para personalizá-los. Essa expansão do papel do desenvolvedor ocorre em um momento em que muitos pensavam que seria diminuído com o surgimento de códigos gerados por IA. No entanto, desenvolver código com suporte de IA abre caminho para os desenvolvedores assumirem responsabilidades adicionais, como supervisionar o uso de códigos não gerados por humanos. Outras novas ferramentas, como desenvolvimento de “baixo código” e sem código (LCNC), também exigem supervisão humana.",
+ photoCover: "https://ubiminds.com/site/uploads/2024/03/demanda-por-desenvolvedor-de-software-ainda-maior-2024.jpg"
+ },
+ {
+ id:"4",
+ title:"Decola Tech Avanade 2025: Sua Jornada Rumo ao Futuro da Tecnologia",
+ description:"A revolução tecnológica continua e, com ela, surgem oportunidades imperdíveis para quem deseja ingressar no mercado de TI. O Decola Tech Avanade 2025 chegou para transformar carreiras, proporcionando uma trilha educacional completa para aqueles que desejam se tornar desenvolvedores full stack.Este programa é uma iniciativa incrível da DIO em parceria com a Avanade, oferecendo um caminho estruturado para oaprendizado de Spring Boot e Angular. Durante o bootcamp, os participantes terão acesso a conteúdos teóricos e práticos, desenvolvendo habilidades essenciais para atuar no setor de tecnologia. A jornada completa conta com 67 horas de aprendizado e certificação para os concluintes.O Decola Tech Avanade 2025 é destinado a estudantes de ensino superior nas áreas de exatas, com conclusão a partir de julho de 2026, e que residam nas cidades de São Paulo, Recife e regiões metropolitanas. Além disso, é necessário ter disponibilidade para atuar no modelo híbrido, das 9h às 16h.",
+ photoCover:"https://i.ytimg.com/vi/SDe73ysJzhU/maxresdefault.jpg"
}
]
diff --git a/src/app/pages/content/content.component.css b/src/app/pages/content/content.component.css
index b014aa73..6cc568bb 100644
--- a/src/app/pages/content/content.component.css
+++ b/src/app/pages/content/content.component.css
@@ -1,29 +1,41 @@
.container__content{
-
width: 100%;
- height: 100vh;
-
+ min-height: 100vh;
margin-top: 20px;
-
display: flex;
flex-direction: column;
- align-items: center;
}
-.content__cover > img{
- border:5px solid rgb(144, 144, 144);
- border-radius: 5px;
- width: 500px;
- min-width: 500px;
- height: 300px;
+.content__title > h1{
+ font-size: clamp(20px, 3vw, 35px);
}
+.content__cover > img{
+ float: left ;
+ margin-right: 10px;
+ margin-top: 10px;
+ width: 600px;
+
+ @media(max-width:850px) {
+ width: 100%;
+ margin-bottom: 15px;
+ }
+}
.content__description{
- margin-top: 15px;
+ font-size: 18px;
+ text-align: justify;
}
-.content__description > p{
- margin-top: 20px;
- color: rgb(198, 197, 197);
+a{
+ margin-left: auto;
+ align-self: flex-end;
+ padding: 0.5rem;
+ border: 1px solid black;
+ border-radius: 4px;
+ margin-bottom: 1rem;
+
+ @media(max-width:1200px) {
+ margin-top: 1rem;
+ }
}
diff --git a/src/app/pages/content/content.component.html b/src/app/pages/content/content.component.html
index 908e1e91..cf5c26ab 100644
--- a/src/app/pages/content/content.component.html
+++ b/src/app/pages/content/content.component.html
@@ -1,15 +1,12 @@
+
+
+
\ No newline at end of file
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 007fef0a..f9826a3e 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -1,15 +1,29 @@
import { Component, OnInit } from '@angular/core';
+import { Post } from 'src/app/types/postType';
+import { dataFake } from 'src/app/data/dataFake';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
- styleUrls: ['./home.component.css']
+ styleUrls: ['./home.component.css','./home-articleForm.component.css']
})
-export class HomeComponent implements OnInit {
+export class HomeComponent{
+
+ posts:Post[] = dataFake;
+ formVisible:boolean = false;
- constructor() { }
+ newPost:Post = {
+ id: '',
+ title: '',
+ description: '',
+ photoCover: ''
+ }
- ngOnInit(): void {
+ switchFormVisibility():void{
+ this.formVisible = !this.formVisible;
}
+ addNewPost():void{
+ this.posts.unshift(this.newPost);
+ }
}
diff --git a/src/app/service/theme.service.ts b/src/app/service/theme.service.ts
new file mode 100644
index 00000000..57f50bd5
--- /dev/null
+++ b/src/app/service/theme.service.ts
@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ThemeService {
+
+ dark:boolean = false;
+
+ public switchTheme(){
+ this.dark = !this.dark
+
+ if(this.dark){
+ document.documentElement.style.setProperty("--background-color","#131313")
+ document.documentElement.style.setProperty("--text-color","whitesmoke")
+ document.documentElement.style.setProperty("--border-color","whitesmoke")
+ }else{
+ document.documentElement.style.setProperty("--background-color","whitesmoke")
+ document.documentElement.style.setProperty("--text-color","#131313")
+ document.documentElement.style.setProperty("--border-color","#2b2b2b")
+ }
+ }
+
+}
diff --git a/src/app/types/postType.ts b/src/app/types/postType.ts
new file mode 100644
index 00000000..3171848b
--- /dev/null
+++ b/src/app/types/postType.ts
@@ -0,0 +1,6 @@
+export type Post = {
+ id: string,
+ title:string,
+ description:string,
+ photoCover:string
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 2df7b63b..aee3214f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
- MARVEL BLOG +
+ DEV'S BLOG
diff --git a/src/polyfills.ts b/src/polyfills.ts
index 429bb9ef..56af115a 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -1,53 +1 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
- * file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Opera), Edge on the desktop, and iOS and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- * (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js'; // Included with Angular CLI.
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
+import 'zone.js'; // Included with Angular CLI.
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 8104b9b5..5262b848 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,14 +1,27 @@
-/* You can add global styles to this file, and also import other style files */
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tiny5&display=swap');
+:root {
+ --background-color: whitesmoke;
+ --text-color: #131313;
+ --border-color: #2b2b2b
+ --box-shadow: box-shadow: rgba(255, 255, 255, 0.2) 0px 2px 8px;
+}
+
*{
margin:0;
padding:0;
box-sizing: border-box;
- background-color: #111111;
- color:white;
- font-family: 'Open Sans', sans-serif;
+ font-family: 'Poppins', sans-serif;
+ background-color: var(--background-color);
+ color:var(--text-color) ;
+ border-color: var(--border-color) !important;
+ transition: all 0.2s;
}
-
a{
text-decoration: none;
}
+
+body{
+ width: 90vw;
+ max-width: 1600px;
+ margin: 0 auto;
+}
+
-## Running unit tests
+- ### Home Mobile
+
+
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+- ### Article Desktop
+
+
-## Running end-to-end tests
+- ### Article Mobile
+
+
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+- ### Form Desktop
+
-## Further help
+- ### New Article Desktop
+
+
+- ### Form Mobile
+
+
+
+
+## ⏭️ Próximos passos
+- Implementar **validação no formulário** de artigos para garantir dados mais estruturados e consistentes.
+- Melhorar ainda mais a **experiência do usuário** com ajustes visuais e usabilidade.
+- Explorar **novas funcionalidades**, como categorias e filtros de artigos.
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
diff --git a/assets/addArticle.png b/assets/addArticle.png
new file mode 100644
index 00000000..3e652929
Binary files /dev/null and b/assets/addArticle.png differ
diff --git a/assets/articleAdded.png b/assets/articleAdded.png
new file mode 100644
index 00000000..b3ad803e
Binary files /dev/null and b/assets/articleAdded.png differ
diff --git a/assets/articleDark.png b/assets/articleDark.png
new file mode 100644
index 00000000..a149df0b
Binary files /dev/null and b/assets/articleDark.png differ
diff --git a/assets/articleLight.png b/assets/articleLight.png
new file mode 100644
index 00000000..565789b7
Binary files /dev/null and b/assets/articleLight.png differ
diff --git a/assets/articleMobileDark.png b/assets/articleMobileDark.png
new file mode 100644
index 00000000..1ab88d4f
Binary files /dev/null and b/assets/articleMobileDark.png differ
diff --git a/assets/articleMobileLight.png b/assets/articleMobileLight.png
new file mode 100644
index 00000000..612ac5fd
Binary files /dev/null and b/assets/articleMobileLight.png differ
diff --git a/assets/formMobileDark.png b/assets/formMobileDark.png
new file mode 100644
index 00000000..57a51b22
Binary files /dev/null and b/assets/formMobileDark.png differ
diff --git a/assets/formMobileLight.png b/assets/formMobileLight.png
new file mode 100644
index 00000000..323082c4
Binary files /dev/null and b/assets/formMobileLight.png differ
diff --git a/assets/homeDark.png b/assets/homeDark.png
new file mode 100644
index 00000000..032bd74a
Binary files /dev/null and b/assets/homeDark.png differ
diff --git a/assets/homeLight.png b/assets/homeLight.png
new file mode 100644
index 00000000..402d1eb0
Binary files /dev/null and b/assets/homeLight.png differ
diff --git a/assets/homeMobileDark.png b/assets/homeMobileDark.png
new file mode 100644
index 00000000..99396d88
Binary files /dev/null and b/assets/homeMobileDark.png differ
diff --git a/assets/homeMobileLight.png b/assets/homeMobileLight.png
new file mode 100644
index 00000000..1f1c359d
Binary files /dev/null and b/assets/homeMobileLight.png differ
diff --git a/src/app/app.component.html b/src/app/app.component.html
index dfc8f0a4..c2414e11 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@