import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div  flex; flex-direction: column; align-items: center; background-color: gray; padding: 20px;">
      <h1 [style.background-color]="kolorTlaNapisu">{{ napis }}</h1>
    </div>
    <div  flex; flex-direction: column; align-items: center;">
      <img   1px solid black; width: 200px; height: auto; margin-top: 20px; padding: 5px;">
    </div>
    <div  flex; flex-direction: column; align-items: center; margin-top: 20px;">
      <button (click)="zmienKolorTlaNapisu()">Zmień kolor tła napisu</button>
    </div>
  `,
  styleUrls: ['./app.component.css'],
  standalone: true 
})
export class AppComponent {
  title = 'wizytowka';
  napis = 'Nazywam się Adrian Gołębiewski';
  kolorTlaNapisu = 'gray';
  zdjecieUrl = 'https://m.wm.pl/2020/01/orig/0000005900-24831520-920893851400482-5986523915120031049-o-604944.jpg';

  zmienKolorTlaNapisu() {
    this.kolorTlaNapisu = '#' + Math.floor(Math.random()*16777215).toString(16);
  }
}