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

<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>Bitte den Vollbildmodus verwenden!</h4>
          </div>
          <div class="entry">
            <h4>05.03.2024</h4>
            <p>
              Eine neue Startseite ist nun verfügbar, um mehr Informationen über
              die App bereitzustellen.
            </p>
          </div>
          <div class="entry">
            <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">
          <div class="entry">
            <h4>0.8.0</h4>
            <ul>
              <li>Neue Startseite implementiert</li>
              <li>Character Picker in die Startseite integriert</li>
            </ul>
          </div>

          <div class="entry">
            <h4>0.7.0</h4>
            <ul>
              <li>Internationalization umgesetzt</li>
              <li>UI-Buttons vereinheitlicht</li>
              <li>Erste Klassen, Unterklassen und Völker eingepflegt</li>
            </ul>
          </div>
        </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>