Chneemann/videoflix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added header component, logos & colors

Browse source
This commit is contained in:
Chneemann 2024-08-01 15:15:02 +02:00
parent c9dd48ac46
commit a8ae57ad84
10 changed files with 104 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/components/home/header/header.component.html Normal file
View file

@ -0,0 +1,6 @@
<header>
<div class="logo">
<img src="./../../../../assets/img/logo_full.svg" alt="" />
</div>
<div class="btn">Log in</div>
</header>

14
frontend/src/app/components/home/header/header.component.scss Normal file
View file

@ -0,0 +1,14 @@
header {
display: flex;
justify-content: space-between;
align-items: center;
height: 88px;
padding: 10px 96px;
}
.logo {
img {
width: 200px;
height: 32px;
}
}

23
frontend/src/app/components/home/header/header.component.spec.ts Normal file
View file

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

12
frontend/src/app/components/home/header/header.component.ts Normal file
View file

@ -0,0 +1,12 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
standalone: true,
imports: [],
templateUrl: './header.component.html',
styleUrl: './header.component.scss'
})
export class HeaderComponent {
}

4
frontend/src/app/components/home/home.component.html
View file

@ -1 +1,3 @@
<p>home works!</p>
<section>
<app-header></app-header>
</section>

9
frontend/src/app/components/home/home.component.ts
View file

@ -1,12 +1,11 @@
import { Component } from '@angular/core';
import { HeaderComponent } from './header/header.component';
@Component({
selector: 'app-home',
standalone: true,
imports: [],
imports: [HeaderComponent],
templateUrl: './home.component.html',
styleUrl: './home.component.scss'
styleUrl: './home.component.scss',
})
export class HomeComponent {
}
export class HomeComponent {}

14
frontend/src/assets/img/logo_ci.svg Normal file
View file

@ -0,0 +1,14 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.71 0.0499866C1.09 0.229987 1.47 0.419987 1.84 0.599987C3.6 1.44999 5.35 2.30999 7.11 3.15999C9.55 4.33999 11.98 5.52999 14.42 6.70999C16.7 7.81999 18.98 8.92999 21.26 10.03C23 10.88 24.74 11.77 26.54 12.49C25.26 12.23 23.91 12.62 22.73 13.12C21.71 13.56 20.73 14.1 19.72 14.57C18.62 15.08 17.35 15.08 16.24 14.59L6.22 10.14C2.44 8.46999 0 4.67999 0 0.499987C0 0.129987 0.38 -0.110013 0.71 0.0499866Z" fill="url(#paint0_linear_2_2)"/>
<path d="M31.3 17.17L4.3 30.36L1.11 31.92C0.6 32.17 0 31.79 0 31.22V30.13C0 27.08 1.67 24.3 4.3 22.88C4.48 22.78 4.66 22.7 4.84 22.61L19.4 16L24 13.94C24.34 13.79 24.69 13.67 25.05 13.58C25.75 13.4 26.47 13.34 27.19 13.4C27.98 13.47 28.75 13.68 29.48 14.03L31.3 14.91C32.24 15.37 32.24 16.72 31.3 17.17Z" fill="url(#paint1_linear_2_2)"/>
<defs>
<linearGradient id="paint0_linear_2_2" x1="13.27" y1="14.96" x2="13.27" y2="-1.3504e-05" gradientUnits="userSpaceOnUse">
<stop stop-color="#3547FF"/>
<stop offset="1" stop-color="#8903FF"/>
</linearGradient>
<linearGradient id="paint1_linear_2_2" x1="-0.94" y1="30" x2="30.06" y2="13.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#8903FF"/>
<stop offset="1" stop-color="#3547FF"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

19
frontend/src/assets/img/logo_full.svg Normal file
View file

@ -0,0 +1,19 @@
<svg width="201" height="32" viewBox="0 0 201 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.71 0.0499866C1.09 0.229987 1.47 0.419987 1.84 0.599987C3.6 1.44999 5.35 2.30999 7.11 3.15999C9.55 4.33999 11.98 5.52999 14.42 6.70999C16.7 7.81999 18.98 8.92999 21.26 10.03C23 10.88 24.74 11.77 26.54 12.49C25.26 12.23 23.91 12.62 22.73 13.12C21.71 13.56 20.73 14.1 19.72 14.57C18.62 15.08 17.35 15.08 16.24 14.59L6.22 10.14C2.44 8.46999 0 4.67999 0 0.499987C0 0.129987 0.38 -0.110013 0.71 0.0499866Z" fill="url(#paint0_linear_2_2)"/>
<path d="M31.3 17.17L4.3 30.36L1.11 31.92C0.6 32.17 0 31.79 0 31.22V30.13C0 27.08 1.67 24.3 4.3 22.88C4.48 22.78 4.66 22.7 4.84 22.61L19.4 16L24 13.94C24.34 13.79 24.69 13.67 25.05 13.58C25.75 13.4 26.47 13.34 27.19 13.4C27.98 13.47 28.75 13.68 29.48 14.03L31.3 14.91C32.24 15.37 32.24 16.72 31.3 17.17Z" fill="url(#paint1_linear_2_2)"/>
<path d="M48.95 21.7L47.47 18.37L42.73 7.83001C41.78 5.70001 39.67 4.32001 37.34 4.32001H36.56C36.14 4.32001 35.87 4.76001 36.05 5.13001L46.63 26.99C46.95 27.67 47.92 27.66 48.25 26.98L48.88 25.67C49.48 24.42 49.51 22.97 48.95 21.7ZM58.57 4.32001C55.58 4.32001 52.87 6.09001 51.66 8.83001L48.47 16.08C48.12 16.89 48.12 17.8 48.48 18.6C48.82 19.33 49.21 20.04 49.52 20.78C49.89 21.64 50.16 22.62 49.98 23.54C50.49 22.24 51.14 20.98 51.74 19.72C52.54 18.07 53.33 16.42 54.12 14.77C54.97 13 55.82 11.24 56.67 9.47001C57.28 8.20001 57.89 6.93001 58.5 5.66001C58.64 5.39001 58.77 5.11001 58.9 4.84001C59.01 4.60001 58.84 4.32001 58.57 4.32001ZM166.6 4.32001V22.84C166.6 25.51 168.77 27.68 171.44 27.68V9.16001C171.44 6.49001 169.27 4.32001 166.6 4.32001ZM154.73 23V9.16001C154.73 6.49001 152.56 4.32001 149.89 4.32001V27.68H164.84V23H154.73ZM148.13 9.00001V4.32001H133.19V27.68H138.02V18.92H146.31V14.27H138.02V9.00001H148.13ZM118.98 4.01001C112.2 4.01001 106.96 9.25001 106.96 16C106.96 22.75 112.17 27.99 118.98 27.99C125.79 27.99 131.07 22.78 131.07 16C131.07 9.22001 125.76 4.01001 118.98 4.01001ZM118.98 23.22C114.96 23.22 111.92 20.14 111.92 16C111.92 11.86 114.9 8.78001 118.98 8.78001C123.06 8.78001 126.08 11.85 126.08 16C126.08 20.15 123 23.22 118.98 23.22ZM105.79 8.97001V4.32001H90.53V27.68H105.79V23.03H95.37V17.98H104.56V13.61H95.37V8.97001H105.79ZM75.45 4.32001H67.51V27.68H75.45C83.2 27.68 88.39 23 88.39 16C88.39 9.00001 83.2 4.32001 75.45 4.32001ZM76.14 23H72.34V9.00001H76.14C80.44 9.00001 83.43 11.85 83.43 16C83.43 20.15 80.44 23 76.14 23ZM59.59 4.32001V27.68H64.43V9.16001C64.43 6.49001 62.26 4.32001 59.59 4.32001ZM186.86 19.04L195.15 27.59H193.62C190.9 27.59 188.29 26.5 186.38 24.57L183.97 22.13L183.53 21.74L181.9 23.39C179.86 25.45 178.1 26.82 175.04 27.35C174.33 27.47 173.69 26.92 173.69 26.2C173.69 25.9 173.81 25.6 174.03 25.38L180.66 18.76L180.75 18.69L180.14 18.06L176.64 14.52H176.65C174.7 12.55 173.6 9.89001 173.6 7.12001C173.6 6.56001 174.28 6.28001 174.68 6.68001L183.6 15.71L184.2 15.09L185.23 14.05L191.46 7.81001C193.63 5.63001 196.59 4.41001 199.67 4.41001H200.66L187.6 17.5L187.38 17.72L186.45 18.68L186.86 19.04Z" fill="url(#paint2_linear_2_2)"/>
<defs>
<linearGradient id="paint0_linear_2_2" x1="13.27" y1="14.96" x2="13.27" y2="-1.3504e-05" gradientUnits="userSpaceOnUse">
<stop stop-color="#3547FF"/>
<stop offset="1" stop-color="#8903FF"/>
</linearGradient>
<linearGradient id="paint1_linear_2_2" x1="-0.94" y1="30" x2="30.06" y2="13.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#8903FF"/>
<stop offset="1" stop-color="#3547FF"/>
</linearGradient>
<linearGradient id="paint2_linear_2_2" x1="25.28" y1="29.75" x2="208.74" y2="1.8" gradientUnits="userSpaceOnUse">
<stop stop-color="#8903FF"/>
<stop offset="1" stop-color="#3547FF"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

5
frontend/src/assets/style/colors.scss Normal file
View file

@ -0,0 +1,5 @@
/* COLORS */
$white: #fff;
$black: #000;
$gray: #ababab;
$blue: #2e3edf;

5
frontend/src/styles.scss
View file

@ -1 +1,4 @@
/* You can add global styles to this file, and also import other style files */
* {
margin: 0;
scroll-behavior: smooth;
}