EduardoDev
/
line-gestao-frontend
mirror of https://github.com/eduardolopesx03/line-gestao-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: registro-login

This commit is contained in:
Eduardo 2025-12-10 18:09:01 -03:00
parent 8bf3c67d7a
commit e40e93280d
13 changed files with 238 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/cta-button/cta-button.scss
View File

@ -4,6 +4,8 @@
height: 66px;
margin-top: 50px;
margin-bottom: 100px;
padding-left: 50px;
padding-right: 50px;
background-color: rgba(201, 30, 181, 0.76);
color: #FFFFFF;

10
src/app/components/cta-button/cta-button.spec.ts
View File

@ -1,18 +1,18 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CtaButtonComponent } from './cta-button';
import { CtaButton } from './cta-button';
describe('CtaButton', () => {
let component: CtaButton;
let fixture: ComponentFixture<CtaButton>;
let component: CtaButtonComponent;
let fixture: ComponentFixture<CtaButtonComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [CtaButton]
imports: [CtaButtonComponent]
})
.compileComponents();
fixture = TestBed.createComponent(CtaButton);
fixture = TestBed.createComponent(CtaButtonComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

24
src/app/components/feature-card/feature-card.scss
View File

@ -25,6 +25,13 @@
📱 RESPONSIVIDADE
================================ */
@media (min-width: 1200px) and (max-width: 1399.98px) {
width: 330px;
height: auto;
padding: 24px;
}
/* Telas MUITO pequenas (≤ 360px) */
@media (max-width: 360px) {
width: 95%;
@ -72,6 +79,12 @@
align-items: center;
justify-content: center;
@media (min-width: 1200px) and (max-width: 1399.98px) {
font-size: 18px;
margin-top: -10px;
}
/* Mobile */
@media (max-width: 480px) {
font-size: 18px;
@ -84,6 +97,11 @@
margin-right: 10px;
font-size: 24px;
@media (min-width: 1200px) and (max-width: 1399.98px) {
font-size: 22px;
}
/* Mobile */
@media (max-width: 480px) {
font-size: 20px;
@ -100,6 +118,12 @@
line-height: 1;
padding-left: 15px;
@media (min-width: 1200px) and (max-width: 1399.98px) {
font-size: 16px;
line-height: 1.2;
}
/* Mobile */
@media (max-width: 480px) {
font-size: 15px;

2
src/app/components/footer/footer.html
View File

@ -31,7 +31,7 @@
height="46.84"
background="rgba(201, 30, 181, 0.76)"
color="#FFFFFF"
fontSize="13"
fontSize="11"
fontWeight="700">
</app-cta-button>
</div>

93
src/app/components/footer/footer.scss
View File

@ -5,7 +5,7 @@
.footer-container {
width: 100%;
background: rgba(3, 15, 170, 0.93);
padding: 25px 60px;
padding: 10px 60px; /* ⬅️ TOPO/FUNDO DO FOOTER (antes 16px 60px) */
display: flex;
justify-content: space-between;
@ -14,15 +14,25 @@
font-family: "Inter", sans-serif;
color: #FFFFFF;
/* ===========================
📱 RESPONSIVIDADE
=========================== */
/* 💻 NOTEBOOKS 1200–1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
padding: 6px 50px; /* ⬅️ TOPO/FUNDO NO NOTEBOOK (antes 8px 50px) */
}
/* Tablets e celulares — empilha tudo */
@media (max-width: 768px) {
/* Telas < 1200px — empilha esquerda e direita */
@media (max-width: 1199.98px) {
flex-direction: column;
padding: 25px 20px;
justify-content: center;
align-items: center;
padding: 14px 30px; /* ⬅️ TOPO/FUNDO EM TELAS MÉDIAS (antes 18px 30px) */
text-align: center;
}
/* Tablets e celulares */
@media (max-width: 768px) {
padding: 14px 20px; /* ⬅️ TOPO/FUNDO EM MOBILE (antes 18px 20px) */
align-items: flex-start;
text-align: left;
}
}
@ -31,24 +41,40 @@
/* ===================================== */
.footer-left {
margin-top: 100px;
margin-top: 100px; /* ⬅️ DISTÂNCIA DO TEXTO PRO TOPO NO DESKTOP (antes 100px) */
/* 💻 NOTEBOOKS 1200–1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
margin-top: 80px; /* ⬅️ DISTÂNCIA NO NOTEBOOK (antes 100px) */
}
/* Telas < 1200px */
@media (max-width: 1199.98px) {
margin-top: 24px;
}
@media (max-width: 768px) {
margin-top: 40px;
margin-top: 20px;
}
@media (max-width: 480px) {
margin-top: 20px;
margin-top: 16px;
}
}
.footer-left p {
margin: 0 0 4px 270px;
/* 🔁 PADRÃO PARA DESKTOPS E NOTEBOOKS: MESMO ESPAÇAMENTO HORIZONTAL */
margin: 0 0 4px 120px;
font-size: 14px;
font-weight: 600;
/* Telas < 1200px */
@media (max-width: 1199.98px) {
margin: 0 0 8px 0;
}
@media (max-width: 768px) {
margin-left: 0; /* remove o deslocamento gigante */
margin-left: 0;
font-size: 13px;
}
@ -65,23 +91,32 @@
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
margin-top: 100px; /* ⬅️ DISTÂNCIA DO BLOCO DIREITO PRO TOPO (antes 100px) */
gap: 0px;
margin-right: 300px;
margin-right: 120px; /* espaçamento horizontal já ajustado */
@media (max-width: 1024px) {
margin-right: 100px;
/* 💻 NOTEBOOKS 1200–1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
margin-top: 80px; /* ⬅️ MESMO IDEA DO ESQUERDO (antes 100px) */
gap: 10px;
}
/* Telas < 1200px */
@media (max-width: 1199.98px) {
margin-top: 20px;
margin-right: 0;
align-items: center;
gap: 10px;
}
@media (max-width: 768px) {
margin-right: 0;
align-items: flex-start; /* tudo fica alinhado à esquerda */
margin-top: 40px;
align-items: flex-start;
margin-top: 18px;
}
@media (max-width: 480px) {
margin-top: 20px;
margin-top: 16px;
}
}
@ -93,7 +128,17 @@
justify-content: flex-start;
margin-bottom: 0;
@media (min-width: 1200px) and (max-width: 1399.98px) {
margin-top: 4px;
}
@media (max-width: 1199.98px) {
justify-content: center;
margin-top: 4px;
}
@media (max-width: 768px) {
justify-content: flex-start;
margin-top: 5px;
}
}
@ -137,6 +182,14 @@
.footer-button-wrapper {
margin-top: 0;
@media (min-width: 1200px) and (max-width: 1399.98px) {
margin-top: 6px;
}
@media (max-width: 1199.98px) {
margin-top: 6px;
}
@media (max-width: 768px) {
margin-top: 10px;
}

6
src/app/components/header/header.html
View File

@ -2,14 +2,14 @@
<div class="header-top">
<!-- LOGO -->
<div class="logo-area">
<!-- LOGO + TÍTULO (CLICÁVEIS) -->
<a class="logo-area" routerLink="/"> <!-- ⬅️ AGORA É UM LINK ANGULAR -->
<img src="logo.jpg" alt="Logo" class="logo">
<div class="logo-text ms-2">
<span class="line">Line</span><span class="gestao">Gestão</span>
</div>
</div>
</a>
<!-- MENU -->
<nav class="menu">

76
src/app/components/header/header.scss
View File

@ -43,17 +43,18 @@
/* ===================== */
.logo {
width: 44px; /* MENOR DO QUE ANTES */
width: 44px;
height: 44px;
@media (max-width: 1400px) {
width: 32px;
height: 32px;
/* NOTEBOOKS 1200–1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
width: 38px;
height: 38px;
}
@media (max-width: 1280px) {
width: 30px;
height: 30px;
width: 38px;
height: 38px;
}
@media (max-width: 1024px) {
@ -71,16 +72,20 @@
display: flex;
align-items: center;
gap: 8px;
text-decoration: none; /* ⬅️ tira sublinhado */
color: inherit; /* ⬅️ usa as cores definidas nos spans */
cursor: pointer; /* ⬅️ deixa com “carinha” de botão/link */
}
/* TEXTO DA LOGO */
.logo-text .line,
.logo-text .gestao {
font-weight: 600;
font-size: 32px; /* ANTES 26 → reduzido mais para abrir espaço */
font-size: 32px; /* desktop grande */
@media (max-width: 1400px) {
font-size: 22px;
/* NOTEBOOKS 1200–1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
font-size: 26px;
}
@media (max-width: 1200px) {
@ -116,8 +121,8 @@
gap: 24px;
@media (max-width: 1200px) {
gap: 18px;
}
gap: 18px;
}
@media (max-width: 1024px) {
gap: 14px;
@ -145,13 +150,13 @@
color: #000 !important;
text-decoration: none !important;
@media (max-width: 1400px) {
/* NOTEBOOKS 1200–1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
font-size: 14.5px;
}
@media (max-width: 1200px) {
font-size: 14x;
font-size: 14px;
}
@media (max-width: 1024px) {
@ -182,7 +187,7 @@
display: flex;
align-items: center;
gap: 12px;
margin-left: 0 !important; /* Remove o empurrão à direita */
margin-left: 0 !important;
@media (max-width: 900px) {
gap: 10px;
@ -203,8 +208,11 @@
color: #000;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.08s ease;
@media (max-width: 1400px) {
@media (min-width: 1200px) and (max-width: 1399.98px) {
width: 140px;
height: 36px;
font-size: 14px;
@ -233,6 +241,15 @@
}
}
.btn-cadastrar:hover {
background: #d7d7d7;
}
.btn-cadastrar:active {
background: rgba(225, 225, 225, 0.7) !important;
transform: scale(0.98);
}
/* --- Botão Login --- */
.btn-login {
width: 164px;
@ -242,8 +259,11 @@
color: #fff;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.08s ease;
@media (max-width: 1400px) {
@media (min-width: 1200px) and (max-width: 1399.98px) {
width: 140px;
height: 36px;
font-size: 14px;
@ -272,6 +292,23 @@
}
}
/* garante que o texto SEMPRE fique branco */
.btn-login,
.btn-login:hover,
.btn-login:active,
.btn-login:focus {
color: #fff !important;
}
.btn-login:hover {
background: #d72bd0;
}
.btn-login:active {
background: rgba(227, 61, 207, 0.8) !important;
transform: scale(0.98);
}
/* ===================== */
/* FAIXA AZUL INFERIOR */
/* ===================== */
@ -293,8 +330,9 @@
font-size: 16px;
font-weight: 700;
@media (max-width: 1400px) {
font-size: 13px;
/* NOTEBOOKS 1200–1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
font-size: 15px;
}
@media (max-width: 480px) {

8
src/app/components/header/header.ts
View File

@ -1,11 +1,11 @@
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-header',
imports: [],
standalone: true, // ⬅️ importante para usar `imports` aqui
imports: [RouterLink], // ⬅️ habilita o uso de routerLink no template
templateUrl: './header.html',
styleUrl: './header.scss',
})
export class Header {
}
export class Header { }

68
src/app/pages/home/home.scss
View File

@ -25,18 +25,25 @@
/* ========== RESPONSIVO ========== */
/* até 1400px diminui um pouco */
@media (max-width: 1400px) {
font-size: 40px;
}
/* TABLET */
/* tablets e notebooks pequenos */
@media (max-width: 1024px) {
font-size: 38px;
font-size: 36px;
}
/* CELULAR */
/* tablets menores */
@media (max-width: 768px) {
font-size: 32px;
margin-bottom: 50px;
}
/* celulares */
@media (max-width: 480px) {
font-size: 34px;
font-size: 28px;
margin-bottom: 40px;
}
}
@ -46,21 +53,7 @@
color: #E33DCF;
font-weight: 500;
display: block;
transform: translateX(-70px);
/* RESPONSIVO */
@media (max-width: 1024px) {
transform: translateX(-40px);
}
@media (max-width: 768px) {
transform: translateX(-20px);
}
@media (max-width: 480px) {
transform: translateX(0);
}
text-align: center;
}
/* Segunda linha */
@ -68,20 +61,25 @@
color: #E33DCF;
font-weight: 500;
display: block;
text-align: center;
}
transform: translateX(100px) translateY(-6px);
/* RESPONSIVO */
@media (max-width: 1024px) {
transform: translateX(60px) translateY(-5px);
/* -------- Efeito deslocado só em telas grandes -------- */
@media (min-width: 1200px) {
.main-title .first-line {
transform: translateX(-70px);
}
@media (max-width: 768px) {
transform: translateX(30px) translateY(-4px);
.main-title .second-line {
transform: translateX(100px) translateY(-6px);
}
}
@media (max-width: 480px) {
transform: translateX(0) translateY(0);
/* Em telas menores que 1200px o título fica plenamente centralizado */
@media (max-width: 1199.98px) {
.main-title .first-line,
.main-title .second-line {
transform: none; /* garante que não herda nenhum translate */
}
}
@ -110,22 +108,24 @@
/* Tablets */
@media (max-width: 1024px) {
width: 60%;
width: 70%;
height: auto;
font-size: 22px;
font-size: 20px;
line-height: 1.2;
}
/* Tablets pequenos */
@media (max-width: 768px) {
width: 60%;
font-size: 20px;
width: 80%;
font-size: 18px;
line-height: 1.25;
margin-bottom: 40px;
}
/* Celulares */
@media (max-width: 480px) {
width: 60%;
font-size: 18px;
width: 90%;
font-size: 16px;
line-height: 1.3;
margin-bottom: 30px;
}

1
src/app/pages/register/register.html Normal file
View File

@ -0,0 +1 @@
<p>register works!</p>

0
src/app/pages/register/register.scss Normal file
View File

23
src/app/pages/register/register.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Register } from './register';
describe('Register', () => {
let component: Register;
let fixture: ComponentFixture<Register>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Register]
})
.compileComponents();
fixture = TestBed.createComponent(Register);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

11
src/app/pages/register/register.ts Normal file
View File

@ -0,0 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-register',
imports: [],
templateUrl: './register.html',
styleUrl: './register.scss',
})
export class Register {
}