diff --git a/angular.json b/angular.json index 4c5be2c..815cff0 100644 --- a/angular.json +++ b/angular.json @@ -28,7 +28,10 @@ "src/assets" ], "styles": [ - "src/styles.scss" + "src/styles.scss", + "node_modules/primeicons/primeicons.css", + "node_modules/primeng/resources/themes/lara-light-blue/theme.css", + "node_modules/primeng/resources/primeng.min.css" ], "scripts": [] }, @@ -103,5 +106,8 @@ } } } + }, + "cli": { + "analytics": "c6a5cfe0-a631-41ae-86e2-f31156b27467" } } diff --git a/package-lock.json b/package-lock.json index 42d8e6d..abd52a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,8 @@ "@angular/platform-browser": "^14.1.0", "@angular/platform-browser-dynamic": "^14.1.0", "@angular/router": "^14.1.0", + "primeicons": "^7.0.0", + "primeng": "^14.2.3", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -9923,6 +9925,27 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/primeicons": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz", + "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==" + }, + "node_modules/primeng": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/primeng/-/primeng-14.2.3.tgz", + "integrity": "sha512-4B+ahbjzPcLeYB/4hw7hqD2le0CplSblRORvY97EhW/0T0Vzyr+neVcnSmUAZ9HfyBdflR/WvZzcFuELFRC7kw==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^14.0.0", + "@angular/core": "^14.0.0", + "@angular/forms": "^14.0.0", + "primeicons": "^6.0.1", + "rxjs": "^6.0.0 || ^7.0.0", + "zone.js": "^0.10.2 || ^0.11.0 || ^0.12.0" + } + }, "node_modules/proc-log": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz", diff --git a/package.json b/package.json index bfc1da1..25f24f7 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "@angular/platform-browser": "^14.1.0", "@angular/platform-browser-dynamic": "^14.1.0", "@angular/router": "^14.1.0", + "primeicons": "^7.0.0", + "primeng": "^14.2.3", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0297262..e548f9c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,44 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import {VehicleListComponent} from "./features/vehicle/page/vehicle-list/vehicle-list.component"; +import {LayoutComponent} from "./layout/layout.component"; +import {VehicleViewComponent} from "./features/vehicle/page/vehicle-view/vehicle-view.component"; -const routes: Routes = []; +const routes: Routes = [ + { + path:"", + redirectTo : "app", + pathMatch : "full" + }, + + { + path: "app", + component: LayoutComponent, + children: [ + { + path:"", + redirectTo : "vehicle", + pathMatch : "full" + }, + { + path:'vehicle', + loadChildren: () => import('./features/vehicle/vehicle.module').then(m => m.VehicleModule) + }, + { + path:'service', + loadChildren: () => import('./features/service/service.module').then(m => m.ServiceModule) + }, + { + path : "**", + component : VehicleViewComponent + } + ] + }, + { + path : "**", + component : VehicleViewComponent + } +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.component.html b/src/app/app.component.html index 2a0fbf1..0680b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,484 +1 @@ - - - - - - - - - - - - - - -
- - -
- - - Rocket Ship - - - - - - - - - - {{ title }} app is running! - - - Rocket Ship Smoke - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - Learn Angular - - - - - CLI Documentation - - - - - - Angular Material - - - - - - Angular Blog - - - - - - Angular DevTools - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
- - - - - - - - - - - -
- - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add @angular/pwa
- 
ng add _____
- 
ng test
- 
ng build
-
- - -
- - - Meetup Logo - - - - - - - Discord Logo - - - - -
- - - - - - Gray Clouds Background - - - -
- - - - - - - - - diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b1c6c96..fba7493 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,6 +3,8 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import {LayoutModule} from "./layout/layout.module"; +import {HttpClientModule} from "@angular/common/http"; @NgModule({ declarations: [ @@ -10,7 +12,9 @@ import { AppComponent } from './app.component'; ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + LayoutModule, + HttpClientModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts new file mode 100644 index 0000000..339a911 --- /dev/null +++ b/src/app/core/core.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + + + +@NgModule({ + declarations: [], + imports: [ + CommonModule + ] +}) +export class CoreModule { } diff --git a/src/app/core/routes/api.route.ts b/src/app/core/routes/api.route.ts new file mode 100644 index 0000000..9c1e7bf --- /dev/null +++ b/src/app/core/routes/api.route.ts @@ -0,0 +1 @@ +export const apiRoute = "http://localhost:5000/"; diff --git a/src/app/features/service/page/service-edit/service-edit.component.html b/src/app/features/service/page/service-edit/service-edit.component.html new file mode 100644 index 0000000..e4a5e4e --- /dev/null +++ b/src/app/features/service/page/service-edit/service-edit.component.html @@ -0,0 +1 @@ +

service-edit works!

diff --git a/src/app/features/service/page/service-edit/service-edit.component.scss b/src/app/features/service/page/service-edit/service-edit.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/service/page/service-edit/service-edit.component.spec.ts b/src/app/features/service/page/service-edit/service-edit.component.spec.ts new file mode 100644 index 0000000..5f96def --- /dev/null +++ b/src/app/features/service/page/service-edit/service-edit.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServiceEditComponent } from './service-edit.component'; + +describe('ServiceEditComponent', () => { + let component: ServiceEditComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ServiceEditComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ServiceEditComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/service/page/service-edit/service-edit.component.ts b/src/app/features/service/page/service-edit/service-edit.component.ts new file mode 100644 index 0000000..141836f --- /dev/null +++ b/src/app/features/service/page/service-edit/service-edit.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-service-edit', + templateUrl: './service-edit.component.html', + styleUrls: ['./service-edit.component.scss'] +}) +export class ServiceEditComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/features/service/page/service-list/service-list.component.html b/src/app/features/service/page/service-list/service-list.component.html new file mode 100644 index 0000000..53dd18d --- /dev/null +++ b/src/app/features/service/page/service-list/service-list.component.html @@ -0,0 +1 @@ +

service-list works!

diff --git a/src/app/features/service/page/service-list/service-list.component.scss b/src/app/features/service/page/service-list/service-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/service/page/service-list/service-list.component.spec.ts b/src/app/features/service/page/service-list/service-list.component.spec.ts new file mode 100644 index 0000000..30e89a0 --- /dev/null +++ b/src/app/features/service/page/service-list/service-list.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServiceListComponent } from './service-list.component'; + +describe('ServiceListComponent', () => { + let component: ServiceListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ServiceListComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ServiceListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/service/page/service-list/service-list.component.ts b/src/app/features/service/page/service-list/service-list.component.ts new file mode 100644 index 0000000..826f8a7 --- /dev/null +++ b/src/app/features/service/page/service-list/service-list.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-service-list', + templateUrl: './service-list.component.html', + styleUrls: ['./service-list.component.scss'] +}) +export class ServiceListComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/features/service/service.module.ts b/src/app/features/service/service.module.ts new file mode 100644 index 0000000..2f7a6e4 --- /dev/null +++ b/src/app/features/service/service.module.ts @@ -0,0 +1,37 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import {RouterModule, Routes} from "@angular/router"; +import {VehicleListComponent} from "../vehicle/page/vehicle-list/vehicle-list.component"; +import {VehicleEditComponent} from "../vehicle/page/vehicle-edit/vehicle-edit.component"; +import {VehicleViewComponent} from "../vehicle/page/vehicle-view/vehicle-view.component"; +import { ServiceListComponent } from './page/service-list/service-list.component'; +import { ServiceEditComponent } from './page/service-edit/service-edit.component'; + +const routes: Routes = [ + { + path: '', + component: ServiceListComponent + }, + { + path: 'edit', + component: VehicleEditComponent + }, + { + path:'view', + component:VehicleViewComponent + } +] + + +@NgModule({ + declarations: [ + + ServiceListComponent, + ServiceEditComponent + ], + imports: [ + CommonModule, + RouterModule.forChild(routes) + ] +}) +export class ServiceModule { } diff --git a/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.html b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.html new file mode 100644 index 0000000..7843fbb --- /dev/null +++ b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.html @@ -0,0 +1,15 @@ +
+
+ + +
+ + + + + +
+ + + +
diff --git a/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.scss b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.spec.ts b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.spec.ts new file mode 100644 index 0000000..5ddf8e5 --- /dev/null +++ b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { VehicleEditComponent } from './vehicle-edit.component'; + +describe('VehicleEditComponent', () => { + let component: VehicleEditComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ VehicleEditComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(VehicleEditComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.ts b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.ts new file mode 100644 index 0000000..aefcfa6 --- /dev/null +++ b/src/app/features/vehicle/page/vehicle-edit/vehicle-edit.component.ts @@ -0,0 +1,30 @@ +import { Component, OnInit } from '@angular/core'; +import {VehicleService} from "../../service/vehicle.service"; +import {Router} from "@angular/router"; + +@Component({ + selector: 'app-vehicle-edit', + templateUrl: './vehicle-edit.component.html', + styleUrls: ['./vehicle-edit.component.scss'] +}) +export class VehicleEditComponent implements OnInit { + + vehicle : any = {}; + + constructor(private vehicleService: VehicleService, + private router: Router) { } + + ngOnInit(): void { + + } + + save() { + this.vehicleService.create(this.vehicle).subscribe( { + next: (res)=>{ + if(res.success){ + this.router.navigateByUrl("/app/vehicle").then(); + } + } + }) + } +} diff --git a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html new file mode 100644 index 0000000..dcc67d1 --- /dev/null +++ b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.html @@ -0,0 +1,27 @@ + +
+ +
+ + + + + Marque + Modèle + Matricule + + + + + + {{product.mark}} + {{product.model}} + {{product.matricule}} + + + + + + + + diff --git a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.scss b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.spec.ts b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.spec.ts new file mode 100644 index 0000000..1a02c9d --- /dev/null +++ b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { VehicleListComponent } from './vehicle-list.component'; + +describe('VehicleListComponent', () => { + let component: VehicleListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ VehicleListComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(VehicleListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts new file mode 100644 index 0000000..62b6d85 --- /dev/null +++ b/src/app/features/vehicle/page/vehicle-list/vehicle-list.component.ts @@ -0,0 +1,43 @@ +import {Component, OnInit} from '@angular/core'; +import {Router} from "@angular/router"; +import {VehicleService} from "../../service/vehicle.service"; + +@Component({ + selector: 'app-vehicle-list', + templateUrl: './vehicle-list.component.html', + styleUrls: ['./vehicle-list.component.scss'] +}) +export class VehicleListComponent implements OnInit { + vehicles: any[] = []; + + constructor(private router: Router, + private vehicleService: VehicleService) { + } + + ngOnInit(): void { + this.getServices(); + } + + getServices() { + this.vehicleService.getAll().subscribe({ + next: (res) => { + if (res.success) { + this.vehicles = res.data; + } + } + }) + } + + edit(): void { + /* + let vehicle : any = {}; + vehicle.model = "RangeRoger"; + vehicle.mark = "Sport"; + vehicle.matricule = "535353"; + + this.vehicles.push(vehicle); + */ + this.router.navigateByUrl('/app/vehicle/edit').then(); + } + +} diff --git a/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.html b/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.html new file mode 100644 index 0000000..e5a89af --- /dev/null +++ b/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.html @@ -0,0 +1 @@ +

vehicle-view works!

diff --git a/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.scss b/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.spec.ts b/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.spec.ts new file mode 100644 index 0000000..93600f1 --- /dev/null +++ b/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { VehicleViewComponent } from './vehicle-view.component'; + +describe('VehicleViewComponent', () => { + let component: VehicleViewComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ VehicleViewComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(VehicleViewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.ts b/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.ts new file mode 100644 index 0000000..4fdb71a --- /dev/null +++ b/src/app/features/vehicle/page/vehicle-view/vehicle-view.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-vehicle-view', + templateUrl: './vehicle-view.component.html', + styleUrls: ['./vehicle-view.component.scss'] +}) +export class VehicleViewComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/features/vehicle/service/vehicle.service.spec.ts b/src/app/features/vehicle/service/vehicle.service.spec.ts new file mode 100644 index 0000000..b9638f4 --- /dev/null +++ b/src/app/features/vehicle/service/vehicle.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { VehicleService } from './vehicle.service'; + +describe('VehicleService', () => { + let service: VehicleService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(VehicleService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/features/vehicle/service/vehicle.service.ts b/src/app/features/vehicle/service/vehicle.service.ts new file mode 100644 index 0000000..a33962b --- /dev/null +++ b/src/app/features/vehicle/service/vehicle.service.ts @@ -0,0 +1,32 @@ +import { Injectable } from '@angular/core'; +import {Observable} from "rxjs"; +import {HttpClient} from "@angular/common/http"; +import {apiRoute} from "../../../core/routes/api.route"; + +@Injectable({ + providedIn: 'root' +}) +export class VehicleService { + url: string = "vehicle" + constructor(private http: HttpClient) { } + + getAll():Observable{ + return this.http.get(apiRoute+this.url); + } + + getById(id: string):Observable { + return this.http.get(apiRoute+this.url+"/"+id); + } + + create(vehicle: any):Observable{ + return this.http.post(apiRoute+this.url,vehicle); + } + + update(vehicle: any):Observable{ + return this.http.put(apiRoute+this.url+ "/"+vehicle.id,vehicle); + } + + delete(id: string):Observable{ + return this.http.delete(apiRoute+this.url + "/"+id); + } +} diff --git a/src/app/features/vehicle/vehicle.module.ts b/src/app/features/vehicle/vehicle.module.ts new file mode 100644 index 0000000..e4e316b --- /dev/null +++ b/src/app/features/vehicle/vehicle.module.ts @@ -0,0 +1,43 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {VehicleListComponent} from './page/vehicle-list/vehicle-list.component'; +import {VehicleEditComponent} from './page/vehicle-edit/vehicle-edit.component'; +import {VehicleViewComponent} from './page/vehicle-view/vehicle-view.component'; +import {RouterModule, Routes} from "@angular/router"; +import {TableModule} from "primeng/table"; +import {ButtonModule} from "primeng/button"; +import {InputTextModule} from "primeng/inputtext"; +import {FormsModule} from "@angular/forms"; + +const routes: Routes = [ + { + path: '', + component: VehicleListComponent + }, + { + path: 'edit', + component: VehicleEditComponent + }, + { + path:'view', + component:VehicleViewComponent + } +] + +@NgModule({ + declarations: [ + VehicleListComponent, + VehicleEditComponent, + VehicleViewComponent + ], + imports: [ + CommonModule, + RouterModule.forChild(routes), + TableModule, + ButtonModule, + InputTextModule, + FormsModule + ] +}) +export class VehicleModule { +} diff --git a/src/app/layout/layout.component.html b/src/app/layout/layout.component.html new file mode 100644 index 0000000..e6a5397 --- /dev/null +++ b/src/app/layout/layout.component.html @@ -0,0 +1,43 @@ + + + +
+ +
+ +
+ + + +
+ diff --git a/src/app/layout/layout.component.scss b/src/app/layout/layout.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/layout/layout.component.spec.ts b/src/app/layout/layout.component.spec.ts new file mode 100644 index 0000000..9232948 --- /dev/null +++ b/src/app/layout/layout.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LayoutComponent } from './layout.component'; + +describe('LayoutComponent', () => { + let component: LayoutComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LayoutComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LayoutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/layout/layout.component.ts b/src/app/layout/layout.component.ts new file mode 100644 index 0000000..36ed8b4 --- /dev/null +++ b/src/app/layout/layout.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-layout', + templateUrl: './layout.component.html', + styleUrls: ['./layout.component.scss'] +}) +export class LayoutComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts new file mode 100644 index 0000000..88cad9f --- /dev/null +++ b/src/app/layout/layout.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { LayoutComponent } from './layout.component'; +import {RouterModule, RouterOutlet} from "@angular/router"; + + + +@NgModule({ + declarations: [ + LayoutComponent + ], + imports: [ + CommonModule, + RouterOutlet, + RouterModule + ] +}) +export class LayoutModule { } diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts new file mode 100644 index 0000000..76cf203 --- /dev/null +++ b/src/app/shared/shared.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + + + +@NgModule({ + declarations: [], + imports: [ + CommonModule + ] +}) +export class SharedModule { } diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..10f6c3b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,303 @@ /* You can add global styles to this file, and also import other style files */ + + +:host { + font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 14px; + color: #333; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +body { + font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 8px 0; +} + +p { + margin: 0; +} + +.spacer { + flex: 1; +} + +.toolbar { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 60px; + display: flex; + align-items: center; + background-color: #1976d2; + color: white; + font-weight: 600; +} + +.toolbar img { + margin: 0 16px; +} + +.toolbar #twitter-logo { + height: 40px; + margin: 0 8px; +} + +.toolbar #youtube-logo { + height: 40px; + margin: 0 16px; +} + +.toolbar #twitter-logo:hover, +.toolbar #youtube-logo:hover { + opacity: 0.8; +} + +.content { + display: flex; + margin: 82px auto 32px; + padding: 0 16px; + max-width: 960px; + flex-direction: column; + align-items: center; +} + +svg.material-icons { + height: 24px; + width: auto; +} + +svg.material-icons:not(:last-child) { + margin-right: 8px; +} + +.card svg.material-icons path { + fill: #888; +} + +.card-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: 16px; +} + +.card { + all: unset; + border-radius: 4px; + border: 1px solid #eee; + background-color: #fafafa; + height: 40px; + width: 200px; + margin: 0 8px 16px; + padding: 16px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + transition: all 0.2s ease-in-out; + line-height: 24px; +} + +.card-container .card:not(:last-child) { + margin-right: 0; +} + +.card.card-small { + height: 16px; + width: 168px; +} + +.card-container .card:not(.highlight-card) { + cursor: pointer; +} + +.card-container .card:not(.highlight-card):hover { + transform: translateY(-3px); + box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35); +} + +.card-container .card:not(.highlight-card):hover .material-icons path { + fill: rgb(105, 103, 103); +} + +.card.highlight-card { + background-color: #1976d2; + color: white; + font-weight: 600; + border: none; + width: auto; + min-width: 30%; + position: relative; +} + +.card.card.highlight-card span { + margin-left: 60px; +} + +svg#rocket { + width: 80px; + position: absolute; + left: -10px; + top: -24px; +} + +svg#rocket-smoke { + height: calc(100vh - 95px); + position: absolute; + top: 10px; + right: 180px; + z-index: -10; +} + +a, +a:visited, +a:hover { + color: #1976d2; + text-decoration: none; +} + +a:hover { + color: #125699; +} + +.terminal { + position: relative; + width: 80%; + max-width: 600px; + border-radius: 6px; + padding-top: 45px; + margin-top: 8px; + overflow: hidden; + background-color: rgb(15, 15, 16); +} + +.terminal::before { + content: "\2022 \2022 \2022"; + position: absolute; + top: 0; + left: 0; + height: 4px; + background: rgb(58, 58, 58); + color: #c2c3c4; + width: 100%; + font-size: 2rem; + line-height: 0; + padding: 14px 0; + text-indent: 4px; +} + +.terminal pre { + font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; + color: white; + padding: 0 1rem 1rem; + margin: 0; +} + +.circle-link { + height: 40px; + width: 40px; + border-radius: 40px; + margin: 8px; + background-color: white; + border: 1px solid #eeeeee; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + transition: 1s ease-out; +} + +.circle-link:hover { + transform: translateY(-0.25rem); + box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); +} + +footer { + margin-top: 8px; + display: flex; + align-items: center; + line-height: 20px; +} + +footer a { + display: flex; + align-items: center; +} + +.github-star-badge { + color: #24292e; + display: flex; + align-items: center; + font-size: 12px; + padding: 3px 10px; + border: 1px solid rgba(27,31,35,.2); + border-radius: 3px; + background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); + margin-left: 4px; + font-weight: 600; +} + +.github-star-badge:hover { + background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%); + border-color: rgba(27,31,35,.35); + background-position: -.5em; +} + +.github-star-badge .material-icons { + height: 16px; + width: 16px; + margin-right: 4px; +} + +svg#clouds { + position: fixed; + bottom: -160px; + left: -230px; + z-index: -10; + width: 1920px; +} + +/* Responsive Styles */ +@media screen and (max-width: 767px) { + .card-container > *:not(.circle-link) , + .terminal { + width: 100%; + } + + .card:not(.highlight-card) { + height: 16px; + margin: 8px 0; + } + + .card.highlight-card span { + margin-left: 72px; + } + + svg#rocket-smoke { + right: 120px; + transform: rotate(-5deg); + } +} + +@media screen and (max-width: 575px) { + svg#rocket-smoke { + display: none; + visibility: hidden; + } +} + +a { + color: yellow !important; +}