Angular/src/app/pages/settings/settings.component.html

<!-- Settings & Preferences Page -->
<div class="settings-container">
  <div class="settings-header">
    <h1>
      <mat-icon>settings</mat-icon>
      Einstellungen & Präferenzen
    </h1>
    <p>Verwalten Sie Ihre Lebenslauf-Generator-Einstellungen und Daten</p>
  </div>

  <div class="settings-content">
    
    <!-- Application Settings -->
    <mat-card class="settings-card">
      <mat-card-header>
        <mat-card-title>
          <mat-icon>tune</mat-icon>
          Anwendungseinstellungen
        </mat-card-title>
        <mat-card-subtitle>Konfigurieren Sie Ihre Lebenslauf-Generator-Einstellungen</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <form [formGroup]="settingsForm" class="settings-form">
          <div class="form-section">
            <h3>Anzeigeeinstellungen</h3>
            <div class="form-row">
              <mat-slide-toggle formControlName="darkMode">
                Dunkler Modus
              </mat-slide-toggle>
            </div>
            <div class="form-row">
              <mat-slide-toggle formControlName="showTooltips">
                Hilfreiche Tipps anzeigen
              </mat-slide-toggle>
            </div>
          </div>

          <div class="form-section">
            <h3>Export-Einstellungen</h3>
            <div class="form-row">
              <mat-form-field appearance="outline">
                <mat-label>Standard-Papierformat</mat-label>
                <mat-select formControlName="defaultPaperSize">
                  <mat-option value="A4">A4 (Europäischer Standard)</mat-option>
                  <mat-option value="Letter">Letter (US-Standard)</mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>

          <div class="form-actions">
            <button mat-raised-button color="primary" (click)="saveSettings()">
              <mat-icon>save</mat-icon>
              Save Settings
            </button>
          </div>
        </form>
      </mat-card-content>
    </mat-card>

    <!-- Data Management -->
    <mat-card class="settings-card">
      <mat-card-header>
        <mat-card-title>
          <mat-icon>storage</mat-icon>
          Data Management
        </mat-card-title>
        <mat-card-subtitle>Import, export, and manage your resume data</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <div class="data-actions">
          
          <div class="action-group">
            <h3>Export Data</h3>
            <p>Download your resume data as a backup file</p>
            <button mat-stroked-button (click)="exportData()">
              <mat-icon>download</mat-icon>
              Export Resume Data
            </button>
          </div>

          <div class="action-group">
            <h3>Import Data</h3>
            <p>Upload a previously exported resume data file</p>
            <input #fileInput type="file" accept=".json" (change)="importData($event)" hidden>
            <button mat-stroked-button (click)="fileInput.click()">
              <mat-icon>upload</mat-icon>
              Import Resume Data
            </button>
          </div>

          <div class="action-group">
            <h3>Sample Data</h3>
            <p>Load sample resume data to see how the builder works</p>
            <button mat-stroked-button color="accent" (click)="loadSampleData()">
              <mat-icon>preview</mat-icon>
              Load Sample Data
            </button>
          </div>

          <div class="action-group danger-zone">
            <h3>Reset Data</h3>
            <p class="warning-text">⚠️ This will permanently delete all your resume data</p>
            <button mat-stroked-button color="warn" (click)="clearAllData()">
              <mat-icon>delete_forever</mat-icon>
              Clear All Data
            </button>
          </div>

        </div>
      </mat-card-content>
    </mat-card>

    <!-- About Section -->
    <mat-card class="settings-card">
      <mat-card-header>
        <mat-card-title>
          <mat-icon>info</mat-icon>
          About
        </mat-card-title>
        <mat-card-subtitle>Professional Resume Builder Information</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <div class="about-content">
          <div class="about-section">
            <h3>Professional Resume Builder</h3>
            <p>Version 1.0.0</p>
            <p>
              A modern, professional resume builder application built with Angular 17, 
              TypeScript, and Angular Material UI. Designed to help professionals create 
              outstanding resumes with ease.
            </p>
          </div>

          <div class="about-section">
            <h3>Author Information</h3>
            <div class="author-info">
              <p><strong>Created by:</strong> David Valera Melendez</p>
              <p><strong>Email:</strong> david&#64;valera-melendez.de</p>
              <p><strong>Location:</strong> Made in Germany 🇩🇪</p>
              <p><strong>Created:</strong> August 8, 2025</p>
            </div>
          </div>

          <div class="about-section">
            <h3>Technology Stack</h3>
            <div class="tech-list">
              <span class="tech-item">Angular 17</span>
              <span class="tech-item">TypeScript</span>
              <span class="tech-item">Angular Material</span>
              <span class="tech-item">SCSS</span>
              <span class="tech-item">RxJS</span>
            </div>
          </div>

          <div class="about-section">
            <h3>Features</h3>
            <ul class="features-list">
              <li>Professional Material Design UI</li>
              <li>Step-by-step resume builder</li>
              <li>Real-time preview</li>
              <li>PDF export functionality</li>
              <li>Data import/export</li>
              <li>Responsive design</li>
              <li>Local data storage</li>
            </ul>
          </div>
        </div>
      </mat-card-content>
    </mat-card>

  </div>
</div>