DNDTools/src/app/journal/journal-character/general/general.component.html

<div class="general-container">
  <div class="image-container">
    <img src="assets/images/tel.jpg" alt="character" />
  </div>
  <div class="looks">
    <div class="looks-entry">
      <div class="looks-label">Volk</div>
      <input
        type="text"
        class="looks-input"
        [(ngModel)]="data.species"
        (change)="updateData()"
      />
    </div>
    <div class="looks-entry">
      <div class="looks-label">Klasse</div>
      <input
        type="text"
        class="looks-input"
        [(ngModel)]="data.class"
        (change)="updateData()"
      />
    </div>
    <div class="looks-entry">
      <div class="looks-label">Geschlecht</div>
      <input
        type="text"
        class="looks-input"
        [(ngModel)]="data.gender"
        (change)="updateData()"
      />
    </div>
    <div class="looks-entry">
      <div class="looks-label">Alter</div>
      <input
        type="text"
        class="looks-input"
        [(ngModel)]="data.age"
        (change)="updateData()"
      />
    </div>
    <div class="looks-entry">
      <div class="looks-label">Größe</div>
      <input
        type="text"
        class="looks-input"
        [(ngModel)]="data.height"
        (change)="updateData()"
      />
    </div>
    <div class="looks-entry">
      <div class="looks-label">Gewicht</div>
      <input
        type="text"
        class="looks-input"
        [(ngModel)]="data.weight"
        (change)="updateData()"
      />
    </div>
    <div class="looks-entry">
      <div class="looks-label">Haarfarbe</div>
      <input
        type="text"
        class="looks-input"
        [(ngModel)]="data.hair"
        (change)="updateData()"
      />
    </div>
    <div class="looks-entry">
      <div class="looks-label">Augenfarbe</div>
      <input
        type="text"
        class="looks-input"
        [(ngModel)]="data.eyes"
        (change)="updateData()"
      />
    </div>
    <div class="looks-entry">
      <div class="looks-label">Hautfarbe</div>
      <input
        type="text"
        class="looks-input"
        [(ngModel)]="data.skin"
        (change)="updateData()"
      />
    </div>
  </div>

  <div class="description">
    <textarea
      class="description-area"
      [(ngModel)]="data.description"
      (change)="updateData()"
    ></textarea>
    <label class="description-label">Beschreibung</label>
  </div>

  <div class="personality">
    <div class="personality-box">
      <textarea
        class="personality-area"
        [(ngModel)]="data.personalityTraits"
        (change)="updateData()"
      ></textarea>
      <label class="personality-label">Persönlichkeitsmerkmale</label>
    </div>
    <div class="personality-box">
      <textarea
        class="personality-area"
        [(ngModel)]="data.ideals"
        (change)="updateData()"
      ></textarea>
      <label class="personality-label">Ideale</label>
    </div>
    <div class="personality-box">
      <textarea
        class="personality-area"
        [(ngModel)]="data.bonds"
        (change)="updateData()"
      ></textarea>
      <label class="personality-label">Bindungen</label>
    </div>
    <div class="personality-box">
      <textarea
        class="personality-area"
        [(ngModel)]="data.flaws"
        (change)="updateData()"
      ></textarea>
      <label class="personality-label">Makel</label>
    </div>
  </div>
</div>