added a warning modal at the start that the app is not finished yet

src/app/character/character-picker/character-picker.component.html

@@ -42,3 +42,36 @@
     </div>
   </div>
 </ng-template>
+
+<ng-template #warning let-warning>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">v0.6.0</h4>
+    <button
+      type="button"
+      class="btn-close"
+      aria-label="Close"
+      (click)="warning.dismiss('dismiss')"
+    ></button>
+  </div>
+  <div class="modal-body">
+    <h5>
+      Die App befindet sich immer noch in einem Entwicklungsstadium und es
+      können Fehler auftreten
+    </h5>
+
+    <br />
+    <h5>
+      Fehler bitte an
+      <a href="mailto:giese-engineering@outlook.com?subject=Fehler"
+        >diese Mail
+      </a>
+    </h5>
+    <button
+      style="display: block; margin: auto; margin-top: 32px"
+      class="okay-button"
+      (click)="warning.dismiss('dismiss')"
+    >
+      Verstanden!
+    </button>
+  </div>
+</ng-template>

src/app/character/character-picker/character-picker.component.scss

@@ -16,6 +16,18 @@
     background-color: var(--background-color);
 }
 
+.okay-button {
+    background: var(--accept);
+    width: 8rem;
+    height: 2.5rem;
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    &:hover {
+        background: var(--accept-hover);
+        scale: 1.03;
+    }
+}
+
 // CARDS
 
 .character-card-container {

src/app/character/character-picker/character-picker.component.ts

@@ -4,6 +4,7 @@ import {
   QueryList,
   TemplateRef,
   ViewChildren,
+  ViewChild,
 } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { DataService } from 'src/services/data/data.service';
@@ -23,6 +24,9 @@ export class CharacterPickerComponent {
   @ViewChildren(CharacterCardComponent)
   characterCards!: QueryList<CharacterCardComponent>;
 
+  @ViewChild('warning') warning!: TemplateRef<any>;
+
+  // @ViewChildren(warning) warning!: TemplateRef<any>;
   public constructor(public dataService: DataService, private Router: Router) {
     this.dataService.dataLoaded = false;
     this.dataService.getCollection('characters').then((characters: any) => {
@@ -30,6 +34,10 @@ export class CharacterPickerComponent {
     });
   }
 
+  ngAfterViewInit() {
+    this.showWarning(this.warning);
+  }
+
   public addCharacter() {
     this.Router.navigate(['character/creator']);
   }
@@ -67,4 +75,8 @@ export class CharacterPickerComponent {
     sessionStorage.setItem('characterName', character.name);
     this.Router.navigate(['journal']);
   }
+
+  showWarning(warning: TemplateRef<any>) {
+    this.modalService.open(warning, { ariaLabelledBy: 'modal-basic-title' });
+  }
 }