added a new landing page with scroll down to the character picker

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

@@ -17,65 +17,6 @@ interface characterData {
 export class CharacterCreatorComponent {
   selectedValue: string = '';
 
-  // Translators
-
-  // TODO: Implement the species
-  // public species: characterData[] = [
-  //   { view: 'Mensch', value: 'Human' },
-  //   { view: 'Zwerg', value: 'Dwarf' },
-  //   { view: 'Elf', value: 'Elf' },
-  //   { view: 'Eladrin', value: 'Eladrin' },
-  //   { view: 'Halbelf', value: 'HalfElf' },
-  //   { view: 'Halbelf (Mal des Entdeckens)', value: 'HalfElfDetection' },
-  //   { view: 'Halbling', value: 'Halfling' },
-  //   { view: 'Gnom', value: 'Gnome' },
-  //   { view: 'Halbork', value: 'HalfOrc' },
-  //   { view: 'Tiefling', value: 'Tiefling' },
-  // ];
-
-  // // TODO: Implement the classes
-  // public classes: characterData[] = [
-  //   { view: 'Test', value: 'Test' },
-  //   { view: 'Barbar', value: 'Barbarian' },
-  //   { view: 'Barde', value: 'Bard' },
-  //   { view: 'Druide', value: 'Druid' },
-  //   { view: 'Hexenmeister', value: 'Warlock' },
-  //   { view: 'Kämpfer', value: 'Fighter' },
-  //   { view: 'Kleriker', value: 'Cleric' },
-  //   { view: 'Magier', value: 'Wizard' },
-  //   { view: 'Mönch', value: 'Monk' },
-  //   { view: 'Paladin', value: 'Paladin' },
-  //   { view: 'Schurke', value: 'Rogue' },
-  //   { view: 'Waldläufer', value: 'Ranger' },
-  //   { view: 'Zauberer', value: 'Sorcerer' },
-  // ];
-
-  // public backgrounds: characterData[] = [
-  //   { view: 'Akolyth', value: 'acolyte' },
-  //   { view: 'Scharlatan', value: 'charlatan' },
-  //   { view: 'Edelmann', value: 'noble' },
-  //   { view: 'Entertainer', value: 'entertainer' },
-  //   { view: 'Folk Held', value: 'folkHero' },
-  //   { view: 'Gelehrter', value: 'sage' },
-  //   { view: 'Gladiator', value: 'gladiator' },
-  //   { view: 'Gildenhändler', value: 'guildArtisan' },
-  //   { view: 'Gildehandwerker', value: 'guildMerchant' },
-  //   { view: 'Herumtreiber', value: 'outlander' },
-  //   { view: 'Krimineller', value: 'criminal' },
-  //   { view: 'Künstler', value: 'artist' },
-  //   { view: 'Marine', value: 'sailor' },
-  //   { view: 'Scharlatan', value: 'charlatan' },
-  //   { view: 'Soldat', value: 'soldier' },
-  //   { view: 'Stadtwache', value: 'cityWatch' },
-  //   { view: 'Urchin', value: 'urchin' },
-  // ];
-
-  // public genders: characterData[] = [
-  //   { view: 'Weiblich', value: 'Female' },
-  //   { view: 'Männlich', value: 'Male' },
-  //   { view: 'Divers', value: 'Diverse' },
-  // ];
-
   // Predefined Data
 
   private hitDice: any = {

src/app/character/character-routing.module.ts

@@ -2,11 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { CharacterPickerComponent } from './character-picker/character-picker.component';
 import { CharacterCreatorComponent } from './character-creator/character-creator.component';
+import { LandingPageComponent } from './landing-page/landing-page.component';
 
 const routes: Routes = [
-  { path: 'picker', component: CharacterPickerComponent },
+  { path: 'landingPage', component: LandingPageComponent },
   { path: 'creator', component: CharacterCreatorComponent },
-  { path: '**', redirectTo: 'picker', pathMatch: 'full' },
+  { path: '**', redirectTo: 'landingPage', pathMatch: 'full' },
 ];
 
 @NgModule({

src/app/character/character.module.ts

@@ -13,6 +13,8 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { DeletionConfirmComponent } from './character-picker/deletion-confirm/deletion-confirm.component';
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { LandingPageComponent } from './landing-page/landing-page.component';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   declarations: [
@@ -20,6 +22,7 @@ import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
     CharacterCreatorComponent,
     CharacterCardComponent,
     DeletionConfirmComponent,
+    LandingPageComponent,
   ],
   imports: [
     CommonModule,
@@ -33,6 +36,7 @@ import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
     MatSelectModule,
     MatAutocompleteModule,
     TranslateModule,
+    NgbNavModule,
   ],
   providers: [TranslatePipe],
 })

src/app/character/landing-page/landing-page.component.html

@@ -0,0 +1,120 @@
+<div class="header">
+  <div class="header-image">
+    <img src="assets/images/logo.png" alt="logo" />
+  </div>
+  <div class="title-container">DND-Tools</div>
+  <div class="menu-buttons">
+    <div class="vertical-line"></div>
+    <button (click)="active = 1">News</button>
+    <div class="vertical-line"></div>
+    <button (click)="active = 2">Wiki</button>
+    <div class="vertical-line"></div>
+    <button (click)="active = 3">Changelog</button>
+    <div class="vertical-line"></div>
+    <button (click)="active = 4">Anregungen</button>
+    <div class="vertical-line"></div>
+    <button (click)="active = 5">Fehler</button>
+    <div class="vertical-line"></div>
+  </div>
+</div>
+
+<div class="landing-body">
+  <div class="horizontal">
+    <div class="info">
+      <div class="entry right">
+        <h2>Willkommen auf DND-Tools</h2>
+        <p>
+          Dies ist ein Projekt, um Charaktere für DND-Abenteuer digital tracken
+          zu können. Das Projekt befindet sich noch in der Entwicklung und wird
+          stetig erweitert und verbessert. Vorschläge und Fehlermeldungen sind
+          gerne gesehen und können über den Reiter <i>Fehler</i>
+          eingereicht werden.
+        </p>
+      </div>
+
+      <div class="entry">
+        <h3>Features</h3>
+        <ul>
+          <li>Erstellen und Verwalten von Attributen und Skills</li>
+          <li>Fähigkeiten und Eigenschhaften</li>
+          <li>Vorgefertigte und eigene Zauber</li>
+          <li>Charakterinformationen pflegen</li>
+          <li>Notizfunktion</li>
+          <li>Aufträge, Orte und Personenverzeichnis</li>
+        </ul>
+      </div>
+
+      <div class="entry right">
+        <h3>Wünsche?</h3>
+        <p>
+          Wenn du Wünsche oder Anregungen hast, dann erstelle gerne ein Issue
+          unter dem Reiter <i>Anregungen</i>. Ich freue mich über jede Form von
+          Feedback und Unterstützung.
+        </p>
+      </div>
+    </div>
+    <div class="outlet">
+      @if (active === 1) {
+        <div class="title">News</div>
+        <div class="content">
+          <div class="entry">
+            <h4>05.03.2024</h4>
+            <p>
+              Eine neue Startseite ist nun verfügbar, um mehr Informationen über
+              die App bereitzustellen.
+            </p>
+            <h4>03.03.2024</h4>
+            <p>
+              Die erste Version der App ist nun verfügbar. Es können Charaktere
+              erstellt und verwaltet werden. Die App befindet sich noch in der
+              Entwicklung und wird stetig erweitert und verbessert.
+            </p>
+          </div>
+        </div>
+      } @else if (active === 2) {
+        <div class="title">Wiki</div>
+        <div class="content">
+          Anleitungen, sowie weitere Informationen gibt es im Wiki auf dem
+          Git-Server über
+          <a
+            href="https://gogs.koljastrohm-games.com/Warafear/DNDTools/wiki/_pages"
+            >diesen Link</a
+          >
+          erreichbar.
+        </div>
+      } @else if (active === 3) {
+        <div class="title">Changelog</div>
+        <div class="content">
+          Hier gibt es demnächst einen detaillierten Changelog zu allen
+          Änderungen der letzten Versionen.
+        </div>
+      } @else if (active === 4) {
+        <div class="title">Anregungen</div>
+        <div class="content">
+          Wenn du Anregungen und Wünsche hast, erstelle hierfür einfach ein
+          Issue unter diesem
+          <a href="https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues"
+            >Link</a
+          >. Verwende einfach als Label <i>Featurewunsch</i>.
+        </div>
+      } @else if (active === 5) {
+        <div class="title">News</div>
+        <div class="content">
+          Wenn du inhaltliche, technische oder UI Fehler findest, kannst du
+          gerne ein neues Issue unter diesem
+          <a href="https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues"
+            >Link</a
+          >
+          erstellen. Verwende einfach als Label <i>Bug</i>.
+        </div>
+      }
+    </div>
+  </div>
+  <div class="arrow">
+    <div>
+      <h4 class="b-0">Zur App</h4>
+      <img src="assets/icons/UIIcons/arrowDown.svg" alt="down" />
+    </div>
+  </div>
+</div>
+<app-character-picker></app-character-picker>

src/app/character/landing-page/landing-page.component.scss

@@ -0,0 +1,135 @@
+.header {
+  height: 6rem;
+  background-color: #001928;
+  display: flex;
+
+  .header-image {
+    width: 40%;
+    img {
+      height: 12rem;
+      width: 12rem;
+    }
+    transform: translateY(-0.5rem);
+  }
+
+  .title-container {
+    background-color: #93380d;
+    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
+    width: 20%;
+    height: 7rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 3rem;
+    font-weight: 600;
+    text-align: center;
+    color: #001928;
+  }
+
+  .menu-buttons {
+    width: 40%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    // gap: 0.5rem;
+    margin-right: 1rem;
+
+    button {
+      padding: 0.5rem 0.75rem;
+      border: none;
+      color: #93380d;
+      font-size: 1.5rem;
+      font-weight: 500;
+      background: #001928;
+      transition: background-color 0.2s ease-in-out;
+      //   border-radius: 10px;
+    }
+
+    button:hover {
+      background-color: #052a43;
+    }
+
+    .vertical-line {
+      position: relative;
+      width: 1px;
+      height: 4.5rem;
+    }
+
+    .vertical-line::before {
+      content: "";
+      position: absolute;
+      top: 15%;
+      bottom: 15%;
+      left: 0;
+      border-left: 2px solid #93380d;
+    }
+  }
+}
+
+.landing-body {
+  height: calc(100% - 6rem);
+  background-image: url("../../../assets/images/background-dark.jpg");
+  background-size: cover;
+
+  .horizontal {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 2rem;
+  }
+  .info {
+    width: 50%;
+    height: calc(100vh - 13.5rem);
+    overflow: auto;
+
+    .entry {
+      margin-bottom: 3rem;
+      padding: 1rem 2rem;
+      border-radius: 20px;
+      backdrop-filter: blur(5px);
+      width: 75%;
+      box-shadow: var(--shadow);
+    }
+
+    .right {
+      margin-left: 23%;
+    }
+  }
+  .outlet {
+    width: 45%;
+    height: calc(100vh - 13.5rem);
+    border-radius: 20px;
+    backdrop-filter: blur(5px);
+    box-shadow: var(--shadow);
+    padding: 0 2rem;
+    overflow: auto;
+
+    .entry {
+      margin-bottom: 2rem;
+    }
+  }
+  .arrow {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    text-align: center;
+  }
+}
+
+a {
+  color: #93380d; // Change the link color to red
+  text-decoration: none; // Remove the underline
+
+  &:hover {
+    color: #541f07; // Change the link color to green when hovered over
+  }
+
+  &:visited {
+    color: #541f07; // Change the link color to blue after it's been visited
+  }
+
+  &:active {
+    color: #541f07; // Change the link color to magenta while it's being clicked
+  }
+}

src/app/character/landing-page/landing-page.component.spec.ts

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

src/app/character/landing-page/landing-page.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'landing-page',
+  templateUrl: './landing-page.component.html',
+  styleUrl: './landing-page.component.scss',
+})
+export class LandingPageComponent {
+  active = 1;
+
+  ngOnInit() {
+    window.addEventListener(
+      'wheel',
+      function (e) {
+        e.preventDefault(); // Prevent the default scroll behavior
+
+        // Scroll up or down by the height of the viewport
+        if (e.deltaY < 0) {
+          window.scrollBy(0, -window.innerHeight);
+        } else {
+          window.scrollBy(0, window.innerHeight);
+        }
+      },
+      { passive: false },
+    );
+  }
+}

src/assets/icons/UIIcons/arrowDown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>

src/helpers.scss

@@ -65,6 +65,17 @@
 .t-2 {
   margin-top: 2rem !important;
 }
+.t-3 {
+  margin-top: 3rem !important;
+}
+
+.t-4 {
+  margin-top: 4rem !important;
+}
+
+.t-5 {
+  margin-top: 5rem !important;
+}
 
 .b-0 {
   margin-bottom: 0 !important;
@@ -134,6 +145,18 @@
   margin-bottom: 2rem !important;
 }
 
+.b-3 {
+  margin-bottom: 3rem !important;
+}
+
+.b-4 {
+  margin-bottom: 4rem !important;
+}
+
+.b-5 {
+  margin-bottom: 5rem !important;
+}
+
 .left {
   text-align: left !important;
 }

src/styles.scss

@@ -7,33 +7,6 @@
 @import url("./button-styles.scss");
 
 :root {
-  // COLORS to use but not official
-  // --primary: #d8ac96;
-  --primary-light: #e8c7b5;
-  --primary-dark: #d89777;
-  --secondary-color: #efc8af;
-  --secondary-color-light: #f8e1d7;
-  --secondary-color-dark: #cfaa8c;
-  --tertiary-color: #b9835d;
-  --tertiary-color-light: #cfaa8c;
-  --tertiary-color-dark: #8f5f3b;
-  --quaternary-color: #84a36f;
-  --quaternary-color-light: #7a9e65;
-  --quaternary-color-dark: #6eae52;
-
-  --field-background-color: #efc8af;
-
-  --border-color: #8d8c8c;
-  --border-color-active: #b76840;
-
-  --modal-background: antiquewhite;
-
-  --button-color: #efc8af;
-
-  --header: #ffdec6;
-
-  --text: #000000;
-
   // shadows
   --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
   --shadow-hover: 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
@@ -57,8 +30,6 @@
   --neutral-hover: #a76b43;
   --tab: #c79980;
   --tab-active: #bc8567;
-  //
-  // c28c6f
 
   // Spellcards
 
@@ -87,13 +58,11 @@
   --shadow-bottom: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
   --shadow-top: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
 
-  --old-primary: #d8ac96;
   --primary-color: #a9836f;
   --background-color: #fff2e9;
   --field-background-color: #efc8af;
   --border-color: #8d8c8c;
 
-  // --modal-background: antiquewhite;
   --modal-background: antiquewhite;
   --header: #ffdec6;
   --text: #000000;